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.

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. Inline frames, like elements, are included in the window.frames pseudo-array. With the DOM HTMLIFrameElement object, scripts can access the window object of the framed resource via the contentWindow property. The contentDocument property refers to the document inside the iframe, same as contentWindow.document.

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.

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

Script Iframe Html

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

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.

Script Iframe

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.

Content Script Iframe

How to block framing of your own content

Script Iframe

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: