<iframe> javascript для доступа к родительскому DOM через домены?
Я контролирую содержание iframe, который встроен в страницу из другого домена. Есть ли способ для javascript в моем iframe внести изменения в DOM родителей?
Например, я хотел бы, чтобы мой сценарий iframed добавил несколько элементов html в родительский DOM. Это похоже на довольно высокий порядок - мысли?
Редактирование: существует метод, называемый " Обмен сообщениями с идентификаторами фрагментов ", который может быть способом связи между междоменными фреймами.
Редактирование: Кроме того, Firefox 3.5, Opera, Chrome (и т. Д.), Похоже, принимают API html5 "postMessage", который обеспечивает безопасную междоменную передачу данных между кадрами, фреймами и всплывающими окнами. Это работает как система событий. IE8 поддерживает эту функцию, по-видимому, что, возможно, немного удивительно.
Сводка: Нет, вы не можете напрямую получить доступ / редактировать DOM страницы из другого домена. Но вы можете общаться с ним, и он может сотрудничать, чтобы внести изменения, которые вы хотите.
5 ответов
Ненавижу говорить это, но я на 99% уверен, что это не происходит напрямую из-за безопасности.
Вы можете попробовать это здесь.
BHH
Это возможно.
Вы были правы упомянуть postMessage в ваших изменениях. Для тех, кто ищет, есть отличный обратно-совместимый, только для JavaScript способ общения между доменами. Короткий и простой код. Идеальное решение? Пока вы можете запросить модификации у родителя и потомка:
http://www.onlineaspect.com/2010/01/15/backwards-compatible-postmessage/
Да, ты можешь.
Вы можете реализовать window.postMessage для связи между фреймами и / или окнами между доменами.
Но вам нужно сделать это асинхронным способом.
Если вам это нужно синхронно, вам нужно реализовать обертки вокруг этих асинхронных методов.
<!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://stackru.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>
Child.htm
<!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>
Здесь вы можете изменить дочерний элемент так, чтобы он отправлял почтовые сообщения родителю. например, в child.htm, вы делаете
window.parent.postMessage("alert(document.location.href); document.location.href = 'http://www.google.com/ncr'", "*");
и в родительском, вы делаете (в receiveMessage) eval(evt.data);Не то чтобы использование eval небезопасно, поэтому вместо этого вы должны передать enum и вызвать соответствующую функцию, которую нужно поместить на родительскую страницу.
Для AJAX сервер может вернуть заголовок Access-Control-Allow-Origin: * разрешить междоменный доступ. Может быть, это работает и для IFRAMEs.
Я предполагаю, что вы столкнетесь с проблемами безопасности без использования прокси. Прокси можно очень использовать. Вы можете попробовать один из них:
(1) прокси на основе PHP (будьте осторожны, потому что между полезными ссылками много рекламы)
(2) прокси Apache .htaccess - просто создайте подкаталог proxy в вашем домене и положить туда .htaccess файл, содержащий:
RewriteEngine on
RewriteRule ^(.*)$ http://picasaweb.google.com/$1 [P,L]
Поместите другое доменное имя вместо picasaweb.google.com.
Лично я предпочитаю использовать прокси Apache