When loading content in an ifrasme, there are normally two ways: loading with src or creating iframe dynamically and set content dynamically. In this post, we will talk about how to properly load content in a dynamically created iframe element, especially on how to fix some issue we faced while in Firefox.To create an iframe dynamically, we would normally use JavaScript and with below piece of cod:let iframe = document.createElement("ifrasme");iframe.innerHTML = "this is some text";document.getElementById("content_zone").appendChild(iframe);Once this is ran, an iframe element with html will be...

In this article, we suggest you to get acquainted with the free editor of web languages - Codelobster IDE. It is presented on the software market for a long time already, and it wins a lot of fans.Codelobster IDE allows you to edit PHP, HTML, CSS and JavaScript files, it highlights the syntax and gives hints for tags, functions and their parameters. This editor easily deals with those files that contain a mixed content.If you insert PHP code in your HTML template, then the editor correctly highlights both HTML tags and PHP functions. The same applies to CSS and JavaScript code, which is contai...

Sometimes there is a need for website owners to monitor user behavior on the site so that they can know what pages are mostly visited and which parts are more popular so that they can provide better service to their users. These behavior usually contain user clicks, user mouse over events etc. These data can be sent back to server when triggered with some meta data.In this post, we will cover a few ways to monitor user behavior on a web portal and send data back to backend sever.1. Synchronous AJAXA common way to send data back to backend server is using AJAX to send the data in the page unloa...

In HTTP header, there is a field named Referer which is to provide the referrer of the current accessed page. In this post, we will introduce the usage of HTTP referer field.On the web, when a user visits a webpage, s/he must be from some place. This place is usually referred a s referer. This information is very important to some website operators and server owners as they want to know where they get the traffic from and this helps them provide better service for potential targeted users.In the request header of a HTTP request, there is a Referer filed which can be set to the referrer URL ind...

This post is about an experience of mine on fixing a HTTP 406 Not Acceptable error seen on one of my page.Just got back from a business trip and opened my computer as usual to start to monitor my website statistics. But when I opened the page on showing real time page views, it shows nothing but zero. So I pressed F12 to bring up the developer tool to check on what's going on. The logic of loading the real time page view is backed by AJAX call. In the developer tool console, I see that the rAJAX request gets HTTP 406 Not Acceptable error. And in the network tab, see similar result.This confuse...

When want to open a new page in a new tab on clicking a link on a page, the usual way of achieving this is to use target="_blank" property in a tag. However, the use of this leaves space for phishing website.Backgroundparent and openerBefore talking about the opener object, let's know a bit about parent object when using iframe. HTML provides a parent object which is used to communicate between the parent page and the embedded iframe element. This parent object can be accessed using window.parent. Similar to parent, opener can be used to access the window element of the page which op...

Sometimes you may want to load other website's page in your own website's iframe, but due to some security concerns, other website may have security configurations which prevent you from loading their pages into your iframe. In this case, if you try to load them, you would see a blank page or a text message telling that it's prohibited. Fortunately, you can detect this before you actually decide to load it.To prevent a page from being loaded by an iframe from other site, the response header sent to the browser will contain some options which denies the load. These response header opt...

In some cases, one would want to convert a HTML string to the DOM elements so that JavaScript can handle them easily. This is frequently used when one get some data from third party APIs where the data is in HTML format.In JavaScript, there are a couple of ways one can use to convert HTML to DOM elements.DOMParserdocument.createElementDOMParserDOMParser can parse XML or HTML source stored in a string into a DOM Document. After the conversion, the normal JavaScript call of handling DOM elements can be used, like getting element by id or using selectors.For example, assuming there...