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

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

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

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

10 ответов


<a onclick="parent.abc();" href="#" >Call Me </a>

посмотреть

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

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

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


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

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

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

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


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

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

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

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

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

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

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.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>

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


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

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


родитель.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()">

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


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

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

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