JavaScript – 以编程方式访问使用数据URI作为源的iframe

前端之家收集整理的这篇文章主要介绍了JavaScript – 以编程方式访问使用数据URI作为源的iframe前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用“数据”URI以编程方式创建iframe:
<iframe id="myFrame" src='data:text/html;charset=utf-8,<!DOCTYPE html><html><head></head><body><h1>Hello.</h1></body></html>'></iframe>​

此框架加载正常,但似乎使用iframe以编程方式进行跨域安全检查.

var iframeDoc = document.getElementById('myFrame').contentWindow.document;
$(iframeDoc.body).find('h1').text('Changed');

在Chrome和Safari中抛出错误

Unsafe JavaScript attempt to access frame with URL
data:text/html;charset=utf-8,… from frame with URL http://… The
frame requesting access has a protocol of ‘http’,the frame being
accessed has a protocol of ”. Protocols must match.

这是一个显示安全错误的小提琴:http://jsfiddle.net/bhGcw/4/

Firefox和Opera不会抛出此异常,并允许更改iframe内容.似乎Webkit看到一个空白的数据URI协议,并将其视为跨域违规.

有没有办法解决

解决方法

有点晚了,而不是使用数据网址,您使用HTML5属性srcdoc.
<iframe id="iframe" srcdoc='<html><body><h1>Hello!</h1></body></html>'></iframe>
<script type="text/javascript">
    $(function(){
        $($("iframe")[0].contentWindow.document).find("h1").text("Modified from the parent window!");
    });
</script>

http://jsfiddle.net/ff3bF/有一个例子

猜你在找的JavaScript相关文章