JavaScript: how to load dynamic contents (HTML String, JSON) to iframe
来源:互联网 发布:mac电脑 win怎么截图 编辑:程序博客网 时间:2024/05/23 21:52
http://www.zomeoff.com/javascript-how-to-load-dynamic-contents-html-string-json-to-iframe/
The story
Although people are suggesting the replacement of <iframe> by <div> due to the poor usability of <iframe>, there are still some cases that <iframe> is the only way to go.
Consider such case : you want to show a preview screen before the user hit “submit” button on a page with form (the data input page). When the preview button is hit, an ajax request is sent to the server asking a validation of the user input. Then the server either generates the preview page HTML code (if the input is valid) or error message (if the input is not valid), in JSON format. The client receives the JSON response. If the JSON is an error message, then the client alerts user the error, otherwise, presents the preview screen (the HTML codes in JSON).
All of these seem very straight forward, until the time that you are presenting the preview page HTML codes. As the preview page HTML is a full set of HTML code, including the <html>, <head> and <body>tags, and more importantly it includes a new set of CSS styles and JavaScript codes. If you present these codes inside a <div> tag, the new CSS styles and JavaScript codes will definitely interferer the CSS styles and JavaScript codes of the data input page, making the both preview screen and the data input page extremely awful.
In such case, the proper way is to present the preview screen as an independent section from the data input page. This is where <iframe> should be used instead of <div>. Everything in <iframe> is independent from its parent document, so the <iframe> can have its own <doctype>, <html>,<head>, <body>, and CSS styles and JavaScript.
The problem
However, according to the specification of <iframe>, the content of <iframe> is specified by the “src” attribute which accepts values in URL format, like “http://www.something.com/”. It cannot load dynamic HTML codes. Moreover, as <iframe> is treated like an independent section from the current page, JavaScript frameworks such as jQuery has limited ability to modify its contents: you can only select and modify the contents inside the <body> of the <iframe> contents, you can do nothing outside the <body>, not to mention the jQuery ready() function doesn’t even work properly for <iframe>.
The solution
However, after some studies on the relationship between <iframe> and its associated document contents and combined the discussion on the web, we successfully inject HTML codes into an <iframe>. Here is how we do that:
1
<html>
2
<head>
3
</head>
4
<body>
5
<h1>Test iframe</h1>
6
<iframe id=
"test_iframe"
src=
"about:blank"
width=400 height=400></iframe>
7
8
<button onClick=
"javascript:injectHTML();"
>Inject HTML</button>
9
</body>
10
11
<script language=
"javascript"
>
12
function
injectHTML(){
13
14
//step 1: get the DOM object of the iframe.
15
var
iframe = document.getElementById(
'test_iframe'
);
16
17
var
html_string =
'<html><head></head><body><p>iframe content injection</p></body></html>'
;
18
19
/* if jQuery is available, you may use the get(0) function to obtain the DOM object like this:
20
var iframe = $('iframe#target_iframe_id').get(0);
21
*/
22
23
//step 2: obtain the document associated with the iframe tag
24
//most of the browser supports .document. Some supports (such as the NetScape series) .contentDocumet, while some (e.g. IE5/6) supports .contentWindow.document
25
//we try to read whatever that exists.
26
var
iframedoc = iframe.document;
27
if
(iframe.contentDocument)
28
iframedoc = iframe.contentDocument;
29
else
if
(iframe.contentWindow)
30
iframedoc = iframe.contentWindow.document;
31
32
if
(iframedoc){
33
// Put the content in the iframe
34
iframedoc.open();
35
iframedoc.writeln(html_string);
36
iframedoc.close();
37
}
else
{
38
//just in case of browsers that don't support the above 3 properties.
39
//fortunately we don't come across such case so far.
40
alert(
'Cannot inject dynamic contents into iframe.'
);
41
}
42
43
}
44
45
</script>
46
</html>
We have tested this code with Firefox 3.5 / 4 / 5, IE 6,7,8,9 and Chrome and fortunately all of them supports the dynamic HTML loading with this method.
- JavaScript: how to load dynamic contents (HTML String, JSON) to iframe
- Adding Dynamic Contents to IFrames
- Introduce AJAX about how to dynamic loading HTML/JSON/XML dataType
- How to Load a Java Native/Dynamic Library (DLL)
- How to Load a Java Native/Dynamic Library (DLL)
- How to use boost::property_tree to load and write JSON
- How to Load Custom Javascript Script in WordPress
- How to Load XML with JavaScript on an HTML5 Page
- How to force an iframe to reload?
- How to load the treeview
- How to parse JSON
- js string to json / json to string
- Unknown():Unable to load dynamic library 问题解决
- PHP startup: Unable to load dynamic library
- PHP Startup: Unable to load dynamic library
- Unable to load dynamic library -- gd.so
- unable to load dynamic library php_pdo_pgsql.dll
- php startup:unable to load dynamic openssl
- vs2005中文乱码问题
- iPhone中通过代码增加控件
- 从陈皓的《UNIX传奇》中摘录的Unix族谱
- 295. Money isn't everything. 金钱不是万能的
- C++进阶 必读书籍
- JavaScript: how to load dynamic contents (HTML String, JSON) to iframe
- 技术人员分享的好处,why not?
- 系统吞吐性能优化简述
- 无论是抢救灾区伤员
- 2012.8.15 单词 IOC withholds(保留) South Korean medal
- char 与 unsigned char的本质区别
- (该文已作废,请绕道)github 如何删除一个 repository 仓库
- dell 服务器引导盘安装2003
- Ubuntu12.04下eclipse提示框黑色背景色的修改方法