您的位置：首页 > Web前端 > JavaScript

JavaScript: how to load dynamic contents (HTML String, JSON) to iframe

2012-08-15 07:44 489 查看
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.
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航