回答:
<a onclick="parent.abc();" href="#" >Call Me </a>
window.parentを参照してください
現在のウィンドウまたはサブフレームの親への参照を返します。
ウィンドウに親がない場合、その親プロパティはそれ自体への参照です。
ウィンドウがにロードされたとき<iframe>
、<object>
または<frame>
、その親ウィンドウを埋め込む要素とウィンドウです。
alert
のうちどちらが呼び出されるのか疑問に思っています。親のalert
関数またはiframeのalert
関数(parent.abc();
iframeで呼び出された場合)
私は最近、なぜこれもうまくいかないのかを知る必要がありました。
子iframeから呼び出す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から親にアクセスするために再び発生し、既存の修正は機能しませんでした。
今回の答えは、親ページとiframeのdocument.domainを同じになるように変更することでした。これは、同じ発信元ポリシーチェックをだまして、まったく同じドメインに共存していると考えさせます(サブドメインは別のホストと見なされ、同じ発信元ポリシーチェックに失敗します)。
以下を<head>
iframeのページのに挿入して、親ドメインに一致させます(Doctypeに合わせて調整します)。
<script>
document.domain = "mydomain.com";
</script>
これはlocalhost開発時にエラーをスローすることに注意してください。したがって、エラーを回避するには、次のようなチェックを使用してください。
if (!window.location.href.match(/localhost/gi)) {
document.domain = "mydomain.com";
}
example.com
iframeで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()
は、親ページではなくiframeでfunction abc()
宣言されている場合にのみ機能します。 window.top.abc()
iframeから親ドキュメントに分割されます。
Ash Clarkeがサブドメインに提供したソリューションはうまく機能しますが、document.domain = "mydomain.com"を含める必要があることに注意してください。iframeページのヘッドと親ページのヘッドの両方で、リンクの同一生成元ポリシーチェックで述べられているように
JavaScript DOMアクセス用に実装された同じ生成元ポリシーの重要な拡張機能(ただし、同じ生成元チェックの他のほとんどのフレーバーではない)は、共通のトップレベルドメインを共有する2つのサイトが「同じホスト」に失敗しても通信することを選択できることです。それぞれの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()">
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:The Good Parts」の継承の章で説明されているパターンに似ています。Javascriptのベストプラクティスについては、w3のページで詳細を学ぶこともできます。https://www.w3.org/wiki/JavaScript_best_practices#Avoid_globals