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

时间:2013-10-15 06:22:28

标签: javascript jquery html iframe

我使用托管的CMS,在其他iFrame中呈现iFrame。这些iFrame是从同一个域加载的,但由于这是托管CMS,因此我无法直接访问这些iFrame。是否可以使用jQuery将HTML内容插入ID为body的iFrame的re_contentIframe标记中?

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

<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>

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

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

2 个答案:

答案 0 :(得分:4)

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

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

尝试:

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

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

答案 1 :(得分:0)

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

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>');