发表新帖
发表新帖

Calling a parent window function from an iframe

后端 未结
关注
10 2361
悲&欢浪女
悲&欢浪女 2020-11-22 01:43

I want to call a parent window JavaScript function from an iframe. 



&
相关标签:
10条回答
  • 遥遥无期
    2020-11-22 02:09

    You can use 

    window.top

    see the following.

    <head>
    <script>
    function abc() {
        alert("sss");
    }
    </script>
</head>
<body>
    <iframe id="myFrame">
        <a onclick="window.top.abc();" href="#">Click Me</a>
    </iframe>
</body>
    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-22 02:13

    Window.postMessage()

    This method safely enables cross-origin communication.

    And if you have access to parent page code then any parent method can be called as well as any data can be passed directly from Iframe. Here is a small example:

    Parent page:

    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 code:

    window.parent.postMessage({
    'func': 'parentFunc',
    'message': 'Message text from iframe.'
}, "*");
// Use target origin instead of *

    UPDATES:

    Security note:

    Always provide a specific targetOrigin, NOT *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site (comment by ZalemCitizen).

    References:

    • Cross-document messaging
    • Window.postMessage()
    • Can I Use
    0 讨论(0)
  • 梦毁少年i
    2020-11-22 02:13

    I recently had to find out why this didn't work too.

    The javascript you want to call from the child iframe needs to be in the head of the parent. If it is in the body, the script is not available in the global scope.

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

    Hope this helps anyone that stumbles upon this issue again.

    0 讨论(0)
  • 日久生厌
    2020-11-22 02:25 
    <a onclick="parent.abc();" href="#" >Call Me </a>

    See window.parent

    Returns a reference to the parent of the current window or subframe.

    If a window does not have a parent, its parent property is a reference to itself.

    When a window is loaded in an <iframe>, <object>, or <frame>, its parent is the window with the element embedding the window.

    0 讨论(0)
  • 失恋的感觉
    2020-11-22 02:29

    Another addition for those who need it. Ash Clarke's solution does not work if they are using different protocols so be sure that if you are using SSL, your iframe is using SSL as well or it will break the function. His solution did work for the domains itself though, so thanks for that.

    0 讨论(0)
  • 栀梦
    2020-11-22 02:30

    While some of these solutions may work, none of them follow best practices. Many assign global variables and you may find yourself making calls to multiple parent variables or functions, leading to a cluttered, vulnerable namespace.

    To avoid this, use a module pattern. In the parent window:

    var myThing = {
    var i = 0;
    myFunction : function () {
        // do something
    }
};

var newThing = Object.create(myThing);

    Then, in the iframe: 

    function myIframeFunction () {
    parent.myThing.myFunction();
    alert(parent.myThing.i);
};

    This is similar to patterns described in the Inheritance chapter of Crockford's seminal text, "Javascript: The Good Parts." You can also learn more at w3's page for Javascript's best practices. https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals

    0 讨论(0)
 看不清?
提交回复
热议问题