• Script Iframe Php
• Javascript Iframe
• Content Script Iframe
• Script Iframe Src

It's time to lazy-load offscreen iframes!

Standardized lazy-loading for images landed in Chrome 76 viathe loading attribute and later came to Firefox. We are happy to share thatbrowser-level lazy-loading for iframes is nowstandardized and is alsosupported in Chrome and Chromium-based browsers.

Embedding a script, site or application into an IFrame An IFrame can also be used to integrate a script such as a forum, blog, PDF files, applications such as a calendar or almost anything else you would like to show on an HTML page. To do this simply change the 'src=' link in the code used in step #1.

The easy iframe generator can help you insert iframes into your website code. All you have to do is use the simple HTML iframe creator. The iframe creator does all the work for you, all you have to do is specify items in the drop down menus. The simple iframe creator works by creating iframe HTML source code. Iframe allows you to display a page. Here you can use any IFrame or Script tag without any issue. Using Content Editor. In the above method, we have turned off the editor to use IFrame or Script tag within the content. But what if you need a content editor to format your content badly and you need to use the IFrame tag as well to embed a map or anything else. Instagram embeds provide a block of markup and a script, which injects an iframe into your page. Lazy-loading this iframe avoids having to load all of the script necessary for the embed. Given such embeds are often displayed below the viewport in most articles, this seems like a reasonable candidate for lazy-loading of their iframe.

Standardized lazy-loading of iframes defers offscreen iframes from being loadeduntil the user scrolls near them. This saves data, speeds up the loading ofother parts of the page, and reduces memory usage.

This demo of <iframe loading=lazy>shows lazy-loading video embeds:

Why should we lazy-load iframes? #

Third-party embeds cover a wide range of use cases, from video players, tosocial media posts, to ads. Often this content is not immediately visible inthe user's viewport. Rather, it's only seen once they scroll further down thepage. Despite this, users pay the cost of downloading data and costlyJavaScript for each frame, even if they don't scroll to it.

Based off Chrome's research into automatically lazy-loading offscreen iframesfor Data Saverusers,lazy-loading iframes could lead to 2-3% median data savings, 1-2% FirstContentful Paint reductions at the median, and 2% First InputDelay (FID) improvements at the 95th percentile.

How does built-in lazy-loading for iframes work? #

The loading attribute allows a browser to defer loading offscreen iframes andimages until users scroll near them. loading supports three values:

• lazy: is a good candidate for lazy-loading.
• eager: is not a good candidate for lazy-loading. Load right away.
• auto: browser will determine whether or not to lazily load.

auto is currently a non-standard value, but is the default in Chrome today.Chrome intends on bringing a proposal for this value to the standards table.

Using the loading attribute on iframes works as follows:

Not specifying the attribute at all will have the same impact as explicitlyeagerly loading the resource, except for LiteModeusers, where Chrome will use the auto value to decide whether it should belazy-loaded.

If you need to dynamically create iframes via JavaScript, settingiframe.loading = 'lazy' on the element is alsosupported:

iframe-specific lazy-loading behavior #

The loading attribute affects iframes differently than images, depending onwhether the iframe is hidden. (Hidden iframes are often used for analytics orcommunication purposes.) Chrome uses the following criteria to determinewhether an iframe is hidden:

• The iframe's width and height are 4px or smaller.
• display: none or visibility: hidden is applied.
• The iframe is placed off-screen using negative X or Y positioning.
• This criteria applies to both loading=lazy and loading=auto.

If an iframe meets any of these conditions, Chrome considers it hidden andwon't lazy-load it in most cases. iframes that aren't hidden will only loadwhen they're within the load-in distancethreshold. Chrome shows aplaceholder for lazy-loaded iframes that are still being fetched.

What impact might we see from lazy-loading popular iframe embeds? #

What if we could change the web at large so that lazy-loading offscreen iframeswas the default? It would look a little like this:

Lazy-loading YouTube video embeds (saves ~500KB on initial page load):

Anecdote: when we switched to lazy-loading YouTube embeds for Chrome.com,we saved 10 seconds off of how soon our pages could be interactive on mobiledevices. I have opened an internal bug with YouTube to discuss addingloading=lazy to its embed code.

If you are looking for more efficient ways to load YouTube embeds, you may beinterested in the YouTube litecomponent.

Lazy-loading Instagram embeds (saves >100KB gzipped on initial load):

Instagram embeds provide a block of markup and a script, which injects aniframe into your page. Lazy-loading this iframe avoids having to load all ofthe script necessary for the embed. Given such embeds are often displayed belowthe viewport in most articles, this seems like a reasonable candidate forlazy-loading of their iframe.

Lazy-loading Spotify embeds (saves 514KB on initial load):

Script Iframe Php

Although the above embeds illustrate the potential benefits to lazy-loadingiframes for media content, there's the potential to also see these benefits forads.

Case study: Lazy-loading the Facebook's social plugins #

Facebook's social plugins allow developers to embed Facebook content in theirweb pages. There's a number of these plugins offered, such as embedded posts,photos, videos, comments… The most popular is the Likeplugin - a buttonthat shows a count of who has 'liked' the page. By default, embedding the Likeplugin in a webpage (using the FB JSSDK) pulls in ~215KB of resources, 197KB ofwhich is JavaScript. In many cases, the plugin may appear at the end of anarticle or near the end of a page, so loading it eagerly when it's offscreenmay be suboptimal.

Thanks to engineer Stoyan Stefanov, all of Facebook's social plugins nowsupport standardized iframelazy-loading.Developers who opt in to lazy-loading via the plugins' data-lazyconfiguration will now be able to avoid it loading until the user scrollsnearby. This enables the embed to still fully function for users that need it,while offering to yourexisting iframes without having to manually update them each individually.

Note that native support for lazy-loading iframes is also being worked on in WordPress core.The following snippet will check for the relevant flags so that, once WordPress has thefunctionality built-in, it will no longer manually add the loading='lazy' attribute,ensuring it is interoperable with those changes and will not result in a duplicate attribute.

If your WordPress site utilizes caching (hint: it should), don't forget to rebuildyour site's cache afterwards.

Conclusion #

Baking in standardized support for lazy-loading iframes makes it significantlyeasier for you to improve the performance of your web pages. If you have anyfeedback, please feel free to submit an issue tothe Chromium BugTracker.

And, in case you missed it, check out web.dev's image and video lazy-loadingcollection for more lazy-loading ideas.

With thanks to Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley and StoyanStefanov for their reviews.

In this tutorial, you can learn how to dynamically change the src attribute of an HTML iframe using JavaScript.

Usually you would not want to use an iframe, unless you actually need to load external content; some sites also prevent 'framing' of their pages, in which case you will probably need to download the content you want to display, and then serve it up from your local server.

If you just want to create a DHTML page that loads content dynamically, you may want to use the appropriate HTML sectioning elements and then load the content by using a combination of AJAX and innerHTML or DOM manipulation.

To change the iframe src attribute, we will be using a select drop down menu, and a button element to activate the function that will change the src attribute. Note that this is only for example purposes, instead of using onClick you may want to consider using event handlers in an external script.

Javascript Iframe

The below is a fully working example. You can copy and paste it into a .html file on your computer, and open it in your browser. The JavaScript itself is explained in the subsections of this article.

Result:

Creating the Select Drop Down

The select menu consists of the select element, and multiple option elements, one for each site you want to allow in the iframe. I.e.

You should place this somewhere in the body of your HTML – it does not really matter where you place it, as long as its in the body.

You can now select the different options from the drop down, but before it will work, you will also need a means of getting the value of the selected option. For this we will be making a custom JavaScript function that can be called via the onClick event on a button. Therefor, you should create a button element somewhere. I.e.

The JavaScript Code

Content Script Iframe

The custom function that we will be using is really simple, it only has 3 lines of code!

The first line will create a reference to the select element that we will be using, for simplicity we doing it by ID in this tutorial.

The second line fetches the value of the currently selected option element, which will then be handed over to the iframe in the final and third line of code.

How to block framing of your own content

Script Iframe Src

To block iframing of your own content, you should add the x-frame-options: SAMEORIGIN response header; if you are using an Apache server, this can either be done in your host configuration, or in a seperate .htaccess file by adding the following: