<;iframe>;javascript跨域访问父DOM?
我控制iframe的内容,iframe嵌入到另一个域的页面中。我的iframe中的javascript有没有办法对父对象的DOM进行更改 例如,我想让我的iframed脚本向父DOM添加一堆html元素。这似乎是一个相当高的要求-想法 编辑:存在一种称为“”的技术,它可能是跨域iFrame之间通信的一种方式 编辑:此外,Firefox 3.5、Opera、Chrome(等)似乎正在采用html5,它允许在帧、iFrame和弹出窗口之间进行安全的跨域数据传输。它就像一个事件系统。显然,IE8支持这个特性,这可能有点令人惊讶<;iframe>;javascript跨域访问父DOM?,javascript,dom,iframe,cross-domain,Javascript,Dom,Iframe,Cross Domain,我控制iframe的内容,iframe嵌入到另一个域的页面中。我的iframe中的javascript有没有办法对父对象的DOM进行更改 例如,我想让我的iframed脚本向父DOM添加一堆html元素。这似乎是一个相当高的要求-想法 编辑:存在一种称为“”的技术,它可能是跨域iFrame之间通信的一种方式 编辑:此外,Firefox 3.5、Opera、Chrome(等)似乎正在采用html5,它允许在帧、iFrame和弹出窗口之间进行安全的跨域数据传输。它就像一个事件系统。显然,IE8支持这
摘要:不,您不能直接从其他域访问/编辑页面的DOM。但是你可以与它沟通,它可以合作做出你想要的改变。我不想这么说,但我99%确信这不会因为安全问题而直接发生 你可以试试看
bhh我想你不用代理就会遇到安全问题。代理可能非常容易使用。您可以尝试以下方法之一: (1) a(小心,有用链接之间有很多广告) (2) Apache.htaccess代理-只需在您的域中创建一个子目录
proxy
,并在其中放置一个.htaccess
文件,其中包含:
RewriteEngine on
RewriteRule ^(.*)$ http://picasaweb.google.com/$1 [P,L]
将另一个域名替换为picasaweb.google.com
就个人而言,我更喜欢使用Apache代理,这是可能的
你在编辑中提到postMessage是对的。对于那些正在寻找的人来说,有一种非常好的向后兼容的、javascript唯一的跨域通信方式。代码也很短,很简单。完美的解决方案?只要您可以请求对父级和子级进行修改:
对于AJAX,服务器可以返回头
访问控制允许来源:
以允许跨域访问。也许它也适用于iFrame。是的,你可以您可以实现window.postMessage以跨域跨iFrame和/或windows进行通信。
但是,您需要以异步方式进行
如果需要同步,则需要围绕这些异步方法实现包装器
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<!--
<link rel="shortcut icon" href="/favicon.ico">
<link rel="start" href="http://benalman.com/" title="Home">
<link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">
<script type="text/javascript" src="/js/mt.js"></script>
-->
<script type="text/javascript">
// What browsers support the window.postMessage call now?
// IE8 does not allow postMessage across windows/tabs
// FF3+, IE8+, Chrome, Safari(5?), Opera10+
function SendMessage()
{
var win = document.getElementById("ifrmChild").contentWindow;
// http://robertnyman.com/2010/03/18/postmessage-in-html5-to-send-messages-between-windows-and-iframes/
// http://stackoverflow.com/questions/16072902/dom-exception-12-for-window-postmessage
// Specify origin. Should be a domain or a wildcard "*"
if (win == null || !window['postMessage'])
alert("oh crap");
else
win.postMessage("hello", "*");
//alert("lol");
}
function ReceiveMessage(evt) {
var message;
//if (evt.origin !== "http://robertnyman.com")
if (false) {
message = 'You ("' + evt.origin + '") are not worthy';
}
else {
message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
}
var ta = document.getElementById("taRecvMessage");
if (ta == null)
alert(message);
else
document.getElementById("taRecvMessage").innerHTML = message;
//evt.source.postMessage("thanks, got it ;)", event.origin);
} // End Function ReceiveMessage
if (!window['postMessage'])
alert("oh crap");
else {
if (window.addEventListener) {
//alert("standards-compliant");
// For standards-compliant web browsers (ie9+)
window.addEventListener("message", ReceiveMessage, false);
}
else {
//alert("not standards-compliant (ie8)");
window.attachEvent("onmessage", ReceiveMessage);
}
}
</script>
</head>
<body>
<iframe id="ifrmChild" src="child.htm" frameborder="0" width="500" height="200" ></iframe>
<br />
<input type="button" value="Test" onclick="SendMessage();" />
</body>
</html>
在parent中,您执行(在receiveMessage中)eval(evt.data)代码>
并不是说使用eval是不安全的,所以您应该传递一个enum,并调用需要放在父页面上的相应函数。谢谢,这个链接很好地说明了这个问题。你可以做的是让一个iframe从子域返回到父域,那里的任何脚本都可以访问parent.parent,因为它在同一个域上,这被一些广告公司使用,他们会要求你托管一个文件(内部iframe)请阅读下面@Stefan Steiger的答案。可以使用在跨原点帧之间进行通信。当然,你必须拥有这两个域名。谢谢你的回答,warpech。我想我的编辑混淆了我最初的问题,那就是我如何从另一个域的iframe中修改父页面上的dom。简短的回答似乎是“你不能”。所以我现在正在探索帧间通信方法,服务器端代理肯定是其中之一。谢谢子iframe的加载在混合模式环境中不起作用。例如,https中的主页和iframe(http)中的子页。@lmiguelmh:http页面首先不应加载到https页面中。当前接受的答案在2009年是正确的,但时间已经改变。Stefan Steiger的情况比较好,也许你可以接受你的回答。谢谢你,昆廷,我会考虑这个问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<!--
<link rel="shortcut icon" href="/favicon.ico">
<link rel="start" href="http://benalman.com/" title="Home">
<link rel="stylesheet" type="text/css" href="/code/php/multi_file.php?m=benalman_css">
<script type="text/javascript" src="/js/mt.js"></script>
-->
<script type="text/javascript">
/*
// Opera 9 supports document.postMessage()
// document is wrong
window.addEventListener("message", function (e) {
//document.getElementById("test").textContent = ;
alert(
e.domain + " said: " + e.data
);
}, false);
*/
// https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage
// http://ejohn.org/blog/cross-window-messaging/
// http://benalman.com/projects/jquery-postmessage-plugin/
// http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
// .data – A string holding the message passed from the other window.
// .domain (origin?) – The domain name of the window that sent the message.
// .uri – The full URI for the window that sent the message.
// .source – A reference to the window object of the window that sent the message.
function ReceiveMessage(evt) {
var message;
//if (evt.origin !== "http://robertnyman.com")
if(false)
{
message = 'You ("' + evt.origin + '") are not worthy';
}
else
{
message = 'I got "' + evt.data + '" from "' + evt.origin + '"';
}
//alert(evt.source.location.href)
var ta = document.getElementById("taRecvMessage");
if(ta == null)
alert(message);
else
document.getElementById("taRecvMessage").innerHTML = message;
// http://javascript.info/tutorial/cross-window-messaging-with-postmessage
//evt.source.postMessage("thanks, got it", evt.origin);
evt.source.postMessage("thanks, got it", "*");
} // End Function ReceiveMessage
if (!window['postMessage'])
alert("oh crap");
else {
if (window.addEventListener) {
//alert("standards-compliant");
// For standards-compliant web browsers (ie9+)
window.addEventListener("message", ReceiveMessage, false);
}
else {
//alert("not standards-compliant (ie8)");
window.attachEvent("onmessage", ReceiveMessage);
}
}
</script>
</head>
<body style="background-color: gray;">
<h1>Test</h1>
<textarea id="taRecvMessage" rows="20" cols="20" ></textarea>
</body>
</html>
window.parent.postMessage("alert(document.location.href); document.location.href = 'http://www.google.com/ncr'", "*");