Я хочу викликати функцію JavaScript батьківського вікна з iframe.
<script>
function abc()
{
alert("sss");
}
</script>
<iframe id="myFrame">
<a onclick="abc();" href="#">Call Me</a>
</iframe>Відповіді:
<a onclick="parent.abc();" href="#" >Call Me </a>Дивіться window.parent
Повертає посилання на батьківський код поточного вікна або підкадру.
Якщо у вікна немає батьківського, його батьківське властивість є посиланням на себе.
Коли вікно завантажено в <iframe>, <object>або <frame>його батько вікно з елементом вкладення в вікні.
alertз них буде викликано два ; батьківська alertфункція або функція iframe alert, якщо parent.abc();виклик iframe?
window.postMessage()(або window.parent.postMessage()) існує. Перевірте відповідь @Andrii
Нещодавно мені довелося з’ясувати, чому це теж не працює.
Javascript, який ви хочете зателефонувати від дитини, якщо кадр повинен бути в голові батьків. Якщо він знаходиться в тілі, сценарій недоступний у глобальному масштабі.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="parent.abc();" href="#">Click Me</a>
</iframe>
</body>Сподіваюсь, це допоможе тому, хто знову натрапить на це питання.
Цей спосіб безпечно дозволяє cross-originспілкуватися.
І якщо у вас є доступ до батьківського коду сторінки, тоді можна викликати будь-який батьківський метод, а також будь-які дані можна передавати безпосередньо з Iframe. Ось невеликий приклад:
Батьківська сторінка:
if (window.addEventListener) {
window.addEventListener("message", onMessage, false);
}
else if (window.attachEvent) {
window.attachEvent("onmessage", onMessage, false);
}
function onMessage(event) {
// Check sender origin to be trusted
if (event.origin !== "http://example.com") return;
var data = event.data;
if (typeof(window[data.func]) == "function") {
window[data.func].call(null, data.message);
}
}
// Function to be called from iframe
function parentFunc(message) {
alert(message);
}Код iframe:
window.parent.postMessage({
'func': 'parentFunc',
'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *ОНОВЛЕННЯ:
Примітка безпеки:
Завжди надайте конкретний targetOrigin, НЕ *, якщо ви знаєте, де повинен знаходитися документ іншого вікна. Якщо не надати конкретну ціль, розкриваються дані, які ви надсилаєте на будь-який зацікавлений шкідливий сайт (коментар ZalemCitizen ).
Список літератури:
Я опублікував це як окрему відповідь, оскільки це не пов'язане з моєю наявною відповіддю.
Цю проблему нещодавно знову вирішили для доступу до батьків із iframe, що посилається на піддомен, та існуючі виправлення не спрацювали.
Цього разу відповідь полягала в тому, щоб змінити document.domain батьківської сторінки та iframe бути однаковим. Це введе в оману одні й ті ж перевірки політики походження на думку, що вони співіснують у абсолютно одному домені (субдомени вважаються різним хостом і не відповідають одній і тій же політиці перевірки походження).
Вставте наступне на <head>сторінку сторінки у рамці iframe, щоб вона відповідала батьківському домену (підкоригуйте для вашого типу).
<script>
document.domain = "mydomain.com";
</script>Зауважте, що це призведе до помилки при розробці localhost, тому використовуйте чек, як описано нижче, щоб уникнути помилки:
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
} example.comiframe є abc.example.com, тоді і батько, і iframe повинні зателефонуватиdocument.domain = "example.com"
Можна використовувати
window.topдив. наступне.
<head>
<script>
function abc() {
alert("sss");
}
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="window.top.abc();" href="#">Click Me</a>
</iframe>
</body>abc()працює, лише якщо вони function abc()були оголошені в iframe на відміну від батьківської сторінки. window.top.abc()проривається з рамки iframe у батьківський документ.
Ще одне доповнення для тих, хто цього потребує. Рішення Еша Кларка не працює, якщо вони використовують різні протоколи, тому будьте впевнені, що якщо ви використовуєте SSL, ваш iframe також використовує SSL, або він порушить функцію. Його рішення все-таки працювало для самих доменів, тому за це дякую.
Рішення, надане Еш Кларком для субдоменів, чудово працює, але зауважте, що вам потрібно включити document.domain = "mydomain.com"; як у заголовку сторінки iframe, так і на головній сторінці батьків, як зазначено у посиланні, перевіряється та сама політика походження
Важливим розширенням до тієї ж політики оригіналу, що застосовується для доступу до DOM JavaScript (але не для більшості інших ароматів перевірок того самого походження), є те, що два веб-сайти, що використовують спільний домен верхнього рівня, можуть вибрати комунікацію, незважаючи на те, що "той самий хост" перевірити, встановивши взаємно відповідне властивість document.domain DOM на той самий кваліфікований правий фрагмент їх поточного імені хоста. Наприклад, якщо http://en.example.com/ та http://fr.example.com/ обидва встановили document.domain на "example.com", вони з цього моменту вважатимуться однаковими для мета маніпуляції DOM.
document.domain?
localhostабо ip-адреса машини (зазвичай 127.0.0.1), залежно від того, що знаходиться в адресному рядку URL-адреси.
parent.abc () працюватиме на тому самому домені в цілях безпеки. Я спробував це вирішити, і моя працювала чудово.
<head>
<script>
function abc() {
alert("sss");
}
// window of the iframe
var innerWindow = document.getElementById('myFrame').contentWindow;
innerWindow.abc= abc;
</script>
</head>
<body>
<iframe id="myFrame">
<a onclick="abc();" href="#">Click Me</a>
</iframe>
</body>Сподіваюсь, це допомагає. :)
За допомогою Firefox та Chrome ви можете використовувати:
<a href="whatever" target="_parent" onclick="myfunction()">Якщо моя функція присутня як в iframe, так і в батьківському, викличеться батьківський.
Хоча деякі з цих рішень можуть спрацювати, жодне з них не дотримується кращих практик. Багато хто присвоює глобальні змінні, і ви можете виявити дзвінки до кількох батьківських змінних або функцій, що призводить до захаращеного вразливого простору імен.
Щоб цього уникнути, використовуйте схему модуля. У батьківському вікні:
var myThing = {
var i = 0;
myFunction : function () {
// do something
}
};
var newThing = Object.create(myThing);Потім у iframe:
function myIframeFunction () {
parent.myThing.myFunction();
alert(parent.myThing.i);
};Це схоже на зразки, описані в розділі "Наслідування" в насіннєвому тексті Крокфорда "Javascript: хороші частини". Ви також можете дізнатися більше на сторінці w3 про кращі практики Javascript. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals