Adding Dynamic Contents to IFrames
来源:互联网 发布:魔笛手压缩算法 编辑:程序博客网 时间:2024/05/19 03:26
http://thomas.bindzus.me/2007/12/24/adding-dynamic-contents-to-iframes/
I found myself in a situation this weekend where I needed to add some contents to an iframe dynamically, and naive as I were, I kind of assumed it was straight forward to do it using the DOM.
To try it out I created a simple HTML page adding a div element and a function onPageLoad which would be called when the page was loaded and here I would place my code to dynamically add some contents to the iframe which I also decided to create dynamically just for the sport of it.
<html>
<head>
<title>Adding Dynamic Contents to IFrames</title>
<script type=
"text/javascript"
>
function
onPageLoad()
{
var
iframe = document.createElement(
"iframe"
);
var
canvas = document.getElementById(
"canvas"
);
canvas.appendChild(iframe);
var
div = iframe.document.createElement(
"div"
);
div.style.width =
"50px"
; div.style.height =
"50px"
;
div.style.border =
"solid 1px #000000"
;
div.innerHTML =
"Hello IFrame!"
;
iframe.document.body.appendChild(div);
}
</script>
</head>
<body onload=
"onPageLoad();"
>
<div id=
"canvas"
style=
"border: solid 1px #000000; height: 500px; width: 500px;"
></div>
</body>
</html>
My first attempt failed both in Internet Explorer and Firefox, worst in Firefox which announced that iframe.document didn’t have any properties, and in Internet Explorer the div element was placed after the iframe element not inside intended.I did some research using Google in an attempt to get some qualified help and I learned that there are just as many ways to get the iframe’s document as there are browser platforms, almost. But happy to have found myself in some kind of progress I updated my code for the onPageLoad function.
function
onPageLoad()
{
var
iframe = document.createElement(
"iframe"
);
var
canvas = document.getElementById(
"canvas"
);
canvas.appendChild(iframe);
var
doc =
null
;
if
(iframe.contentDocument)
// Firefox, Opera
doc = iframe.contentDocument;
else
if
(iframe.contentWindow)
// Internet Explorer
doc = iframe.contentWindow.document;
else
if
(iframe.document)
// Others?
doc = iframe.document;
if
(doc ==
null
)
throw
"Document not initialized"
;
var
div = doc.createElement(
"div"
);
div.style.width =
"50px"
; div.style.height =
"50px"
;
div.style.border =
"solid 1px #000000"
;
div.innerHTML =
"Hello IFrame!"
;
doc.body.appendChild(div);
}
My progress was limited, I succeeded in eliminating the error when viewing the page with Firefox, but now it no longer worked in Internet Explorer which announced that doc.body was null.You might wonder why I choose to append the iframe to an element which already exists in the DOM before appending anything to the iframe’s document, that is because I found out that as long as the iframe is not appended to the DOM the document property will not be initialized, this happened both for Internet Explorer and Firefox.Reading the post, I had found, a little more thoroughly I found out that there was a way to write to the iframe’s document using the document.write method. Trying it out I changed my onPageLoad function to write a small text.
function
onPageLoad()
{
var
iframe = document.createElement(
"iframe"
);
var
canvas = document.getElementById(
"canvas"
);
canvas.appendChild(iframe);
var
doc =
null
;
if
(iframe.contentDocument)
// Firefox, Opera
doc = iframe.contentDocument;
else
if
(iframe.contentWindow)
// Internet Explorer
doc = iframe.contentWindow.document;
else
if
(iframe.document)
// Others?
doc = iframe.document;
if
(doc ==
null
)
throw
"Document not initialized"
;
doc.open();
doc.write(
"Hello IFrame!"
);
doc.close();
}
Finally I was able to render the page both in Internet Explorer and Firefox with the same result, I was doing some real progress. Now I could of course create all of my contents in the iframe this way, as the post I found using Google suggested, but it wouldn’t be that dynamic plus I would have to do a lot of string manipulation in order to add event handlers and so on.
My biggest problem being that I only had access to an amputated version of the document element in the iframe I started thinking about ways in which I could make a callback function from the iframe sending the document element to the parent. But in the end the solution was extremely simple and perhaps some of you who read this whill think that it is obvious.
The real trick for making this work only occurred to me while writing this, I tried to add my div element to the iframe’s document element right after the part where I write “Hello IFrame!” as shown above, this gave me the following changed onPageLoad function.
function
onPageLoad()
{
var
iframe = document.createElement(
"iframe"
);
var
canvas = document.getElementById(
"canvas"
);
canvas.appendChild(iframe);
var
doc =
null
;
if
(iframe.contentDocument)
// Firefox, Opera
doc = iframe.contentDocument;
else
if
(iframe.contentWindow)
// Internet Explorer
doc = iframe.contentWindow.document;
else
if
(iframe.document)
// Others?
doc = iframe.document;
if
(doc ==
null
)
throw
"Document not initialized"
;
doc.open();
doc.write(
"Hello IFrame!"
);
doc.close();
var
div = doc.createElement(
"div"
);
div.style.width =
"50px"
; div.style.height =
"50px"
;
div.style.border =
"solid 1px #000000"
;
div.innerHTML =
"Hello IFrame!"
;
doc.body.appendChild(div);
}
The magic appeared, now I got my div element added to the iframe’s document element right after the text I wrote using the write method. The next natural step was to leave out the call to the write method. Calling the open method following by the close method will put the iframe’s document in such a state that you will be able to use the appendChild method.
The only thing left to do after this was to wrap it all up nicely in a class, below is a simplified version of what an IFrame class might look like. Notice that the parent element must be added to the DOM already, but in most cases that shouldn’t cause any problems.
function
IFrame(parentElement)
{
// Create the iframe which will be returned
var
iframe = document.createElement(
"iframe"
);
// If no parent element is specified then use body as the parent element
if
(parentElement ==
null
)
parentElement = document.body;
// This is necessary in order to initialize the document inside the iframe
parentElement.appendChild(iframe);
// Initiate the iframe's document to null
iframe.doc =
null
;
// Depending on browser platform get the iframe's document, this is only
// available if the iframe has already been appended to an element which
// has been added to the document
if
(iframe.contentDocument)
// Firefox, Opera
iframe.doc = iframe.contentDocument;
else
if
(iframe.contentWindow)
// Internet Explorer
iframe.doc = iframe.contentWindow.document;
else
if
(iframe.document)
// Others?
iframe.doc = iframe.document;
// If we did not succeed in finding the document then throw an exception
if
(iframe.doc ==
null
)
throw
"Document not found, append the parent element to the DOM before creating the IFrame"
;
// Create the script inside the iframe's document which will call the
iframe.doc.open();
iframe.doc.close();
// Return the iframe, now with an extra property iframe.doc containing the
// iframe's document
return
iframe;
}
I saved the class in a file called IFrame.js, and using this class simplified my test page to the following.
<html>
<head>
<title>Adding Dynamic Contents to IFrames</title>
<script type=
"text/javascript"
src=
"IFrame.js"
></script>
<script type=
"text/javascript"
>
function
onPageLoad()
{
var
canvas = document.getElementById(
"canvas"
);
var
iframe =
new
IFrame(canvas);
var
div = iframe.doc.createElement(
"div"
);
div.style.width =
"50px"
; div.style.height =
"50px"
;
div.style.border =
"solid 1px #000000"
;
div.innerHTML =
"Hello IFrame!"
;
iframe.doc.body.appendChild(div);
}
</script>
</head>
<body onload=
"onPageLoad();"
>
<div id=
"canvas"
style=
"border: solid 1px #000000; height: 500px; width: 500px;"
></div>
</body>
</html>
- Adding Dynamic Contents to IFrames
- JavaScript: how to load dynamic contents (HTML String, JSON) to iframe
- Adding dynamic nodes to ASP.NET site maps at runtime by deriving from StaticSiteMapProvider
- Adding checkbox to mshflexgrid
- Adding assembly to GAC
- Adding SSL-support to Magento
- Adding Controls to the Toolbar
- Adding the PPA to Ubuntu
- Adding Content to a Document
- Adding Validation to the Model
- adding to window.onload event?
- Adding item animations to ListView
- Adding new nodes to GI
- AJAX Tutorial: A Tale of Two IFrames (or, How To Control Your Browsers History)
- javaFx 学习--之Adding Dynamic Behavior(加动态特性)
- javaFx 学习--之Adding Dynamic Behavior(加动态特性) (2)
- Adding a JDBC driver to JBuilder
- Dynamically Adding Controls to a Web Page...
- Extjs DOM操作总结
- 自然语言处理工具(Stanford-Parser)使用注意事项
- 精心挑选的23款美轮美奂的 jQuery 图片特效插件
- vector string的应用
- skb里的数据
- Adding Dynamic Contents to IFrames
- 今天是2012年8月14日
- 使用SQL*Plus
- 【KMP】串匹配-java代码【最新版本】
- Informatica 8.6
- poj 1135 Dijskral
- Android系统升级流程
- WebGoat——盲注
- 为 Web 设计和开发者准备的免费图书