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

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.

扫描二维码关注公众号，回复： 4850683 查看本文章