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...

Previously we have introduced how Medium achieved loading images lazily, basically what they did was using lots of HTML tags and CSSs to change the images at different stage. It needs lots of code to do this. With the high demand of this feature for resource consumption and performance consideration, Chrome is now working on a feature to provide native support for loading images/iframes lazily. This feature is named lazyload.lazyload will allow three values:auto: the default behavior of lazyload attribute is not altered (user agent decides)on: the feature lazyload is turned on which ...

To ensure security and reduce spamming, modern browsers have implemented very strict rules on when a new window can be opened in a web page. Currently browsers restrict that any new web page to be opened in a new window must be initiated with an user action. The action is usually an user click event. Otherwise, a popup blocker would show on the browser address bar which indicates that something is blocked.To workaround this issue, normally you should implement the window open logic in a click event handler. An example code block would look like:jQuery("#some_element").click(function(){ var win...

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...

Step 1 - AJAX file uploadAJAX file upload tutorialFirst of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.The concept: Create a simple HTML form for file uploadSet the target to an iFrame which is on the actual page but not visibleC...