Great day today for creating IFrames with JavaScript! Well, maybe there’s no good day to do that, we will try it anyway.
First, what are IFrames?
IFrame is abbreviation for “inline frame”. Basically, using an IFrame you bring another page’s content in your HTML page. The content can be on a remote domain or on your own domain too, it doesn’t matter where is the source, the IFrame will display the remote page’s content.
There are some attributes you can set when creating an IFrame, I won’t list them as it’s published in many places. For good reference go to W3Schools IFrame reference.
Problem with IFrame is that in XHTML Strict is not supported, so possibly in the next HTML (5) won’t be supported either. Developers should forget this tag in the far future, but as it’s still supported by all the browsers we may use it with courage.
IFrames and Javascript
There are times when you have to generate IFrames with Javascript. Creating an IFrame with Javascript is very easy, a few line, that is. The following Javascript code will generate you an IFrame
fr1 = document.createElement("IFRAME");
fr1.setAttribute("src", "http://yourdomain.com/page1.html"); /*Set the source of the IFrame*/
fr1.setAttribute("name", "iframe_name"); /*Set a name for the IFrame for easy access*/
fr1.style.width = 170+"px";
fr1.style.height = 600+"px"; /*Set height and width*/
document.body.appendChild(fr1); /*push it into the document*/
That was all. You have your IFrame which will be visible only for the users who have Javascript enabled.
Accessing IFrame with Javascript
There are two ways you can access an IFrame with Javascript: using the document object model (DOM from now on) and using every browser’s frames array.
From the frames array
When a page contains frames, in this case inline frames, the browser creates a special array for itself where it stores all the frames’ details separately.
So, let’s say there are 3 frames on a page. The browser will create an array (always) named “frames”. Parsing the code line by line, the first frame in the document will be indexed as 0, the second as 1, the third 2. So the frames array will look like this
frames(0=> "1st frame's details",
1=> "2nd frame's details",
2=> "3rd frame's details")
Or if the frame has a name set, you can access it via its name:
frames(frame1name=> “1st frame’s details”,
frame2name=> “2nd frame’s details”,
frame3name=> “3rd frame’s details”)
Generally, the browsers support both methods, i prefer the numbered version but using the named version might be easier to remember.
The objects which are existent in a normal page will be existent in the iframes too.
So, accessing the iframes via the frames array will look like this:
window.frames[0].document....;
For the matter of the example, let’s set the “body” element’s style to “background:#000000″
window.frames[0].document.getElementsByTagName('body').style.background="#000000";
If you know the ID of an element from the IFrame’s content, you can set only one specific element’s style by writing:
window.frames[0].document.getElementById(id_ofan_element').style.background="#000000";
The above code will set the element’s with id of “id_ofan_element” background color to black. Remember that this element is in the IFrame, not on the page which called the IFrame tag.
If the IFrame’s source is on a remote domain, for example you call the IFrame on http://example.com and the source of the IFrame is on http://other-example.com, even though the frames array will exist, there’s no way to access any of its details. That’s because it would be considered cross-site scripting (XSS from now on) and that’s a big nono, the browsers’ XSS protection will stop you doing anything with the IFrame’s content.
From the DOM
If you know the ID of the IFrame, you can access the IFrame via the DOM.
Accessing the IFrame via DOM looks like this:
document.getElementById("frame_id"). ...
That’s it.
Using the DOM to access the IFrame is a better solution. On slower PCs or on old browsers some time has to be passed before the frames array is created, thus your script will fail. The DOM on the other hand exist from the beginnings of the process.
Manipulating IFrames with Javascript
Remember that when the source of the IFrame is on a remote domain, you can’t access the IFrame’s any detail with Javascript. There’s no way you can do it… I’d be interested though if there’s a way so please let me know if you know how to do it. just drop in the comments.
So, you have an IFrame with ID “frameID” and name “frameName”. It’s source is on the domain as the script which called the IFrame.
Let’s change the IFrame’s source with Javascript:
/*using the DOM*/
document.getElementById('frameID').src = "new_page.html";
/*using the frames array*/
window.frames['frameName'].location.href = "new_page.html"
Setting the style of an IFrame, using Javascript.
/*using the DOM*/
document.getElementById('frameID').style.margin = "5px";
/*using the frames array*/
window.frames['frameName'].document.style.margin = "5px"
Some thoughts on the IFrame
The IFrames are great in bringing other page’s content to another document, but from the search engine optimizers’ point of view IFrames are equal with quick death. Why? If you know a page which has excessive IFrame, search it in Google. You won’t find anything related to the content of the IFrame. As of why, search engines are still young, they are a bit dumb (sorry). The content of an IFrame is inaccessible for them thus they will know nothing about the IFrame’s content. Of course, if you are in hiding content from search engines, it a cool way.
Other than the above, IFrames will be deprecated in the future. I think the reason is their great insecurity, vulnerability of XSS attacks. Other reason I can’t think of.
Loading ...
Recent Comments