Question

我有一个页面，我需要动态创建一个iframe并将其粘贴到页面上的div中。我像这样创建iframe：

var frame = $('<iframe>')
    .attr('id', 'myIframe')
    .addClass('someClass')
    .appendTo($('#someDiv'));

根据某些条件，我需要：A）将iframe src设置为其他页面或者B）动态地向iframe添加一些HTML。

我有选项A工作正常，但选项B抛出安全错误：

if (someCondition) {
    // option A, works fine
    frame.attr('src', someURL);
} else {
    // option B, blows up with "Access is denied."
    $(frame[0].contentWindow.document).find('body').html(someHTML);
}

在尝试设置HTML之前，是否需要在动态iframe上设置document.domain？我怎么会这样做？是否有更简单的方法将动态内容附加到动态iframe？

提前致谢。

修改这里是动态iframe的呈现HTML，如下所示：

<div id="someDiv">
    <iframe id="myIframe" class="someClass"></iframe>
</div>

Answer 1

很抱歉，如果iframe引用了来自其他域的网址来源，则无法访问该网址。

http://javascript.info/tutorial/same-origin-security-policy

话虽这么说，只要您拥有来自同一域的网址，或者使用“javascript：void（0）;”填充属性src，您就可以访问其正文。之后，尝试以这种方式访问它：

$($('iframe').contents().get(0)).find('body')

Answer 2

我能够使用与this question的答案类似的解决方案来解决问题：

var frame = $('<iframe>')
    .attr('id', 'myIframe')
    .addClass('someClass')
    .attr('src', 'javascript:(function () {' + 
        'document.open();document.domain=\'myDomain.net\';document.close();' + 
     '})();');
    .appendTo($('#someDiv'));

每个定义都是一个黑客，但我认为这是解决问题的最佳方法。

Answer 3

创建iframe时，请确保指定了src：

src='about:blank'

或者在服务器上创建一个blank.html并指向

如何动态处理动态iframe内容的设置

3 个答案: