javascript 使用 jQuery 将 HTML 插入到 iFrame 正文标记中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/19374524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 15:21:43  来源:igfitidea点击:

Use jQuery to Insert HTML into an iFrame Body Tag

javascriptjqueryhtmliframe

提问by L84

I am using a hosted CMS that renders an iFrame within another iFrames. These iFrames are loaded from the same domain but since this is a hosted CMS I do not have access to these iFrames directly. Is it possible, using jQuery, to insert HTML content into the bodytag of the iFrame with the id of re_contentIframe?

我正在使用在另一个 iFrame 中呈现 iFrame 的托管 CMS。这些 iFrame 是从同一个域加载的,但由于这是一个托管的 CMS,我无法直接访问这些 iFrame。是否可以使用 jQuery 将 HTML 内容插入bodyid 为 iFrame的标签中re_contentIframe

Here is how the code renders on my site:

以下是代码在我的网站上的呈现方式:

<div class="editor">
  <iframe id="editorf"  frameborder="0" src="/ForumEditor.aspx?ForumID=2221&TopicID=-1&NoTemplate=False&Internal=False" style="display: inline;">
    <html>
      <head></head>
        <body>
          <!-- CODE -->
            <iframe id="re_contentIframe" frameborder="0" src="javascript:'<html></html>';">
             <html>
              <head></head>
               <body> <!-- THIS IS WHAT I WANT TO TARGET --> </body>
             </html>
            </iframe>
          <!-- CODE -->
      </body>
    </html>
  </iframe>
</div>

I tried using the following code but nothing happens with this code (including no errors):

我尝试使用以下代码,但此代码没有任何反应(包括没有错误):

$(function() {
   $( "#test" ).click(function() {
       $("#re_contentIframe").contents().find("body").html("<p>new HTML content goes here</p>");
   });
});

采纳答案by benastan

The problem is that you are trying to access a nested frame.

问题是您正在尝试访问嵌套框架。

The #re_contentIframeframe is nested within #editorf, which is subsequently nested within your document.

#re_contentIframe框架嵌套#editorf,随后被嵌套在文档中。

Try:

尝试:

$('#re_contentIframe').contents().find('body').find('#editorf').contents()

Fiddle: http://jsfiddle.net/8VP4y/3/

小提琴:http: //jsfiddle.net/8VP4y/3/

回答by sameer_mishra

haven't checked it ,might help :

没有检查过,可能有帮助:

var frameObject = document.getElementById('editorf');
var frameContent = frameObject.contentDocument ||
frameObject.contentWindow.document;
var insideIframe = frameContent.getElementById('re_contentIframe');
var insideIframeContent = insideIframeObject.contentDocument ||
insideIframeObject.contentWindow.document;
var $body = $('body',insideIframeContent);
$body.html('<div>contentupdated</div>');