我有一个页面,需要动态创建一个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>
对不起,但是如果iframe引用了另一个域的URL源,您就无法访问它。
http://javascript.info/tutorial/same-origin-security-policy
尽管如此,您可以访问它的主体,前提是您有来自同一域的url,或者您用“javascript:void(0);”填充属性src。之后,尝试通过以下方式访问它:
$($('iframe').contents().get(0)).find('body')
为了绕过这个问题,我使用了一个与这个问题的答案类似的修补程序:
var frame = $('<iframe>')
.attr('id', 'myIframe')
.addClass('someClass')
.attr('src', 'javascript:(function () {' +
'document.open();document.domain=\'myDomain.net\';document.close();' +
'})();');
.appendTo($('#someDiv'));
这是一个黑客的定义,但我认为这是最好的方法解决问题。