jQuery将脚本和HTML插入iframe

Question

I'm trying to insert a Script & HTML into an iframe. My issue is I can append the HTML to the iframe, but I cannot append it and also keep the source of the Iframe present.

The ultimate goal is to load HTML into the iframe source and have an overlay. Please advise. I think I'm a little off on this one.

$(function() {
            var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="https://www.google.com" width="100%" height="100%" style="width:100%; height:100%;position:relative;">');
            $('body').html( $frame );
            setTimeout( function() {
                var doc = $frame[0].contentWindow.document;
                var $body = $('body',doc);
                $body.html('<h1>Test</h1>');
                $body.html('<div id="cursor" style="position:absolute;style:z-index:999999;"><img width="80" src="/assets/img/cursor_blue.png" /></div>');
                $body.html('<p id="test" style="z-index:9999999;">The queue length is: <span></span></p>');

            }, 1 );
        });

Answer 1

Here is what you can do. Create an iframe with empty src attribute. Give it some id. Make a ajax call to required url to fetch all the html and append it to iframe's body. Now append any additional HTML that you wish to add in the same iframe. I have tested the method in a jsfiddle, check out http://jsfiddle.net/9vhL2/

$(function() {
    var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="" width="100%" height="100%" style="width:100%; height:100%;position:relative;">');
            $('body').html( $frame );
                 var $body = $("#viewframe").contents().find('body');
            $.ajax( 
                {
                    url:"/echo/html/",
                    method:'POST',
                    success:function(data){
                      $body.append(data);
                      $body.append("<h1>Text added by script</h1>")
                      },
                    data: {html: "<p>Text echoed back to request</p><h2>Text from page</h2>"}
                });
});