Вызов родительской оконной функции из iframe - PullRequest
Новая
       22

Вызов родительской оконной функции из iframe

261 голосов
/ 29 января 2010

Я хочу вызвать функцию JavaScript родительского окна из iframe. 

<script>
    function abc()
    {
        alert("sss");
    }
</script>

<iframe id="myFrame">
    <a onclick="abc();" href="#">Call Me</a>
</iframe>

Ответы [ 10 ]

413 голосов
/ 29 января 2010 
<a onclick="parent.abc();" href="#" >Call Me </a>

См. window.parent

Возвращает ссылку на родителя текущего окна или подкадра.

Если у окна нет родителя, его родительское свойство является ссылкой на себя.

Когда окно загружается в <iframe>, <object> или <frame>, его родителем является окно с элементом, внедряющим окно.

76 голосов
/ 09 сентября 2011

Мне недавно пришлось выяснить, почему это тоже не сработало.

JavaScript, который вы хотите вызвать от дочернего элемента iframe, должен находиться в голове родительского элемента. Если он находится в теле, сценарий недоступен в глобальной области видимости. 

<head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="parent.abc();" href="#">Click Me</a>
    </iframe>
</body>

Надеюсь, это поможет любому, кто снова наткнется на эту проблему.

52 голосов
/ 10 января 2017

window.postMessage ()

Этот метод безопасно включает 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.'
}, "*");

Ссылка:

19 голосов
/ 20 февраля 2012

Я разместил это как отдельный ответ, поскольку он не связан с моим существующим ответом.

Эта проблема недавно снова возникла для доступа к родительскому элементу из iframe, ссылающегося на поддомен, и существующие исправления не работали.

На этот раз ответом было изменить то, что document.domain родительской страницы и iframe были одинаковыми. Это обманет тех же проверок политики происхождения , что они сосуществуют в одном и том же домене (субдомены считаются другим хостом и не проходят ту же проверку политики происхождения).

Вставьте следующее в <head> страницы в iframe, чтобы соответствовать родительскому домену (с учетом вашего типа документа). 

<script>
    document.domain = "mydomain.com";
</script>

Обратите внимание, что это приведет к ошибке при разработке localhost, поэтому используйте проверку, подобную следующей, чтобы избежать ошибки: 

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.com";
}
15 голосов
/ 08 ноября 2011

Вы можете использовать 

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>
3 голосов
/ 08 августа 2012

Еще одно дополнение для тех, кому это нужно. Решение Эша Кларка не работает, если они используют разные протоколы, поэтому убедитесь, что, если вы используете SSL, ваш iframe также использует SSL, или он нарушит функцию. Однако его решение действительно сработало и для доменов, так что спасибо за это.

2 голосов
/ 19 февраля 2013

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>

Надеюсь, это поможет. :)

2 голосов
/ 23 апреля 2012

Решение, данное Ash Clarke для поддоменов, прекрасно работает, но, пожалуйста, обратите внимание, что вам нужно включить document.domain = "mydomain.com"; как в заголовке страницы iframe, так и в заголовке родительской страницы, как указано в ссылке одни и те же проверки политики происхождения

Важное расширение той же политики происхождения, реализованной для доступа к DOM JavaScript (но не для большинства других разновидностей проверок одного и того же происхождения), заключается в том, что два сайта, совместно использующие общий домен верхнего уровня, могут выбрать связь, несмотря на ошибку " тот же хост », взаимно устанавливая соответствующее свойство DOM document.domain к тому же квалифицированному правому фрагменту их текущего имени хоста. Например, если http://en.example.com/ и http://fr.example.com/ оба установят document.domain в "example.com", они будут с этой точки считаться одним и тем же источником для манипулирования DOM.

1 голос
/ 19 мая 2014

С Firefox и Chrome вы можете использовать: 

<a href="whatever" target="_parent" onclick="myfunction()">

Если myfunction присутствует и в iframe, и в parent, будет вызван родительский.

0 голосов
/ 03 ноября 2016

Хотя некоторые из этих решений могут работать, ни одно из них не следует передовым методам. Многие присваивают глобальные переменные, и вы можете вызывать несколько родительских переменных или функций, что приводит к загроможденному и уязвимому пространству имен.

Чтобы избежать этого, используйте шаблон модуля. В родительском окне: 

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: The Good Parts». Вы также можете узнать больше на странице w3 о лучших методах работы с Javascript. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...