发表新帖
发表新帖

Replace Entire Content of Iframe

前端 未结
关注
4 1120
鱼传尺愫
鱼传尺愫 2020-12-29 08:11

Is there a way to replace the ENTIRE contents of an iframe using Javascript (or Jquery)?

For example if my iframe had the following content...

blah o
相关标签:
4条回答
  • 南笙
    2020-12-29 08:14

    have a similar scenario, where I am generating a new iFrame with content from a different domain each time the row of a table is clicked.

    To do this, I use jQuery AJAX and PHP. PHP looks at my MySQL table and gets the URL of the iFrame I want to load; it generates the HTML for an iFrame, and I use jQuery AJAX to replace that content.

    My HTML looks something like this:

    <div class="xFrame">
    <iframe id="xFrameWindow" name="xFrameWindow" src=""></iframe>
</div>

    And my AJAX call looks like this:

    function loadPage(record_id) {

    $.ajax({
        type: "POST",
        url: "php/ajax_handler.php",
        data: "action=makeIFrame&record_id=" + record_id,
        success: function(msg){
            $('.xFrame' ).html(msg);
        }
    });
}

    The code replaces the HTML of the div that contains the iFrame with a new iFrame.

    Hope this (or something similar) works for you.

    0 讨论(0)
  • 萌比男神i
    2020-12-29 08:16

    I'm guessing that you're not having problems with cross-site scripting in this instance... Have you had any luck using contentWindow? Something like this seems to work well enough for me:

    iframe = document.getElementById('iframe_id');
iframe.contentWindow.document.open()
iframe.contentWindow.document.write(new_content_here);

    Not my idea, found it here: Write elements into a child iframe using Javascript or jQuery

    0 讨论(0)
  • 太阳男子
    2020-12-29 08:21

    I solved with this code:

    $('#IframeID').contents().find("html").html(html);

    Although this way you can work better in many of the cases, there will be more order:

    $('#IframeID').contents().find("head").html(head);
$('#IframeID').contents().find("body").html(body);

    So, you can play with head and body separately, and a bad change on body will not affect your head.

    I tested on Chrome.

    0 讨论(0)
  • 青春惊慌失措
    2020-12-29 08:37

    I am having the same issue, and if i use the code like this:

    $(youriframe).contents().find('html').html('your content here');

    It works fine in Chrome or FireFox, but in IE8, nothing will be showed or the scroll bar in iframe won't appear.

    If i use Rachel's method, the iframe content will be like this in all browsers:

    <iframe>
    <html>
        <head>
        </head>
        <body>
        </body>
    </html>
</iframe>

    is there any other solution?

    Tried this one:

    var doc = document.getElementById(iframeId).contentWindow.document;
doc.open();
doc.write(iframeContent);
doc.close();

    this works on my case, both ie8 and FF/chrome.

    0 讨论(0)
 看不清?
提交回复
热议问题