我已经被一个页面上创建了一个iframe和页面的域名被明确设置为“xyz.com”但iframe的域默认为“dev.xyz.com”,这是我正在开发的实际域名。跨域iframe通信
的问题是,当我尝试访问通过iframe.contentWindow.document该iframe,它失败,因为在域的差别。
我已经试过了iframe的src设置与document.domain的=“xyz.com”,但文件似乎没有在做的伎俩......
任何想法?
我已经被一个页面上创建了一个iframe和页面的域名被明确设置为“xyz.com”但iframe的域默认为“dev.xyz.com”,这是我正在开发的实际域名。跨域iframe通信
的问题是,当我尝试访问通过iframe.contentWindow.document该iframe,它失败,因为在域的差别。
我已经试过了iframe的src设置与document.domain的=“xyz.com”,但文件似乎没有在做的伎俩......
任何想法?
页内的iframe:
<script>
document.domain = document.domain;
</script>
它看起来很傻,但它的工作原理。请参阅“What does document.domain = document.domain do?”。
经过一番研究,我发现这个jQuery plugin,使使用各种招数旧版本浏览器的postMessage向后兼容。
这里是展示如何将iframe的身体的高度发送到父窗口一个简单的例子:
在主机(父)页面:
// executes when a message is received from the iframe, to adjust
// the iframe's height
$.receiveMessage(
function(event){
$('my_iframe').css({
height: event.data
});
});
// Please note this function could also verify event.origin and other security-related checks.
在iframe的页面:
$(function(){
// Sends a message to the parent window to tell it the height of the
// iframe's body
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
$.postMessage(
$('body').outerHeight(true) + 'px',
'*',
target
);
});
我已经在Chrome 13+,火狐3.6或更高版本,IE7,8和9 XP测试这和W7,OSX和W7上的Safari。 ;)
作为除参照本Alman 插上我以为我会发布这方面的工作的例子。它支持一个iframe,它有一个包含jquery认证的源页面&数据查询脚本,然后使用消息插件将结果传递给{other domain}父窗口。
NB消息的插件将打破如果使用JQ V9作为JQV9不使用“浏览器”在插件引用
第一步骤: 插件的代码添加到发送和接收文档:
http://benalman.com/projects/jquery-postmessage-plugin/
第2步: 一下添加到发送文档:
$.postMessage(
$(X).html(),
'http://DOMAIN [PORT]/FOLDER/SUBFOLDER/RECIEVINGDOCNAME.XXX'
) ;
其中X可以是包含预格式化的JSON阵列或其他东西,这里的HTTP URL一个局部变量是在接收文件的地址。
第三步: 一下添加到接收DOC:
$.receiveMessage(
function(event){
alert("event.data: "+event.data);
$("#testresults").append('<h1>'+event.data+'<h1>');
},
'http://DOMAIN.COM OR SOMETHING'
);
凡HTTP URL是发送文件的域。 擅长IE 8,9,FF16,Safari浏览器(Windows等待x V9未测试),safari x mac的东西。
结果是你想从另一个域页面(你有权访问..)的任何项目。
作为后续工作,下面是创建iframe并尝试访问它的代码: jQuery(“body”)。prepend('
这个库支持HTML5 postMessage和旧版浏览器,其中包含resize + hash https://github.com/ternarylabs/porthole(Ben Alman的jQuery插件3年未触及) – jpillora 2013-02-27 14:43:58
Ben Alman有一个很棒的jquery插件,可以用来解决这个问题。 http://benalman.com/projects/jquery-postmessage-plugin/ – Justin 2011-04-06 13:46:56