javascript - Anropa en funktion i föräldrafönstret från en iframe

Jag vill anropa en JavaScript-funktion i ett föräldrafönster från en iframe.

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

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

Svar #1

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

Se window.parent

Returnerar en referens till föräldern till det aktuella fönstret eller underramen.

Om ett fönster inte har en förälder, är dess föräldraproperty en referens till sig själv.

När ett fönster laddas i ett <iframe>, <object> eller <frame>, är dess förälder fönstret med elementet som bäddar in fönstret.

Svar #2

Window.postMessage()

Denna metod möjliggör säkert cross-origin-kommunikation.

Och om du har tillgång till föräldrasidans kod kan vilken föräldrametod som helst också anropas och vilken data som helst kan skickas direkt från Iframe. Här är ett litet exempel:

Föräldrasida:

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

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

UPPDATERINGAR :

Säkerhetsnotis:

Ge alltid en specifik targetOrigin, INTE *, om du vet var det andra fönstrets dokument ska finnas. Att inte ange ett specifikt mål gör att de data du skickar avslöjas för vilken intresserad illvillig webbplats som helst (kommentar av ZalemCitizen).

Referenser:

  • Meddelanden mellan dokument
  • Window.postMessage()
  • Kan jag använda

Svar #3

Jag var nyligen tvungen att ta reda på varför detta inte fungerade också.

Den JavaScript du vill anropa från det barn-iframe måste vara i förälderns head. Om den är i body är skriptet inte tillgängligt i det globala omfånget.

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

Hoppas detta hjälper någon som råkar stöta på detta problem igen.

Svar #4

Du kan använda

window.top

se följande.

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

Svar #5

Jag har publicerat detta som ett separat svar eftersom det är orelaterat till mitt befintliga svar.

Det här problemet dök nyligen upp igen när man försökte få åtkomst till en förälder från en iframe som refererar till en underdomän, och de befintliga lösningarna fungerade inte.

Den här gången var svaret att ändra document.domain för föräldrasidan och iframe så att de blir samma. Detta kommer att lura same origin-policykontrollerna att tro att de existerar på exakt samma domän (subdomäner betraktas som en annan värd och misslyckas med same origin-policykontrollen).

Infoga följande i <head> på sidan i iframe för att matcha moder-domänen (justera för din doctype).

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

Observera att detta kommer att ge ett fel vid utveckling på localhost, så använd en kontroll som följande för att undvika felet:

if (!window.location.href.match(/localhost/gi)) {
    document.domain = "mydomain.com";
}

Relaterade artiklar