2009-10-21 26 views
46

親ページからiframeのJavaScript関数を呼び出す際に問題があります。iframeでjavascript関数を呼び出す

<html> 
<head> 
    <title>ResultPage</title> 
    <script type="text/javascript"> 
     function Reset() 
     { 
      alert("reset (in resultframe)"); 
     } 
    </script> 
</head> 
<body> 
    ResultPage 
</body> 
</html> 

(私はdocument.allが推奨されていないことを知っているが、このページにのみ表示されなければならないresultFrame.html

mainPage.html

<html> 
<head> 
    <title>MainPage</title> 
    <script type="text/javascript"> 
     function Reset() 
     { 
      if (document.all.resultFrame) 
       alert("resultFrame found"); 
      else 
       alert("resultFrame NOT found"); 

      if (typeof (document.all.resultFrame.Reset) == "function") 
       document.all.resultFrame.Reset(); 
      else 
       alert("resultFrame.Reset NOT found"); 
     } 
    </script> 
</head> 
<body> 
    MainPage<br> 
    <input type="button" onclick="Reset()" value="Reset"><br><br> 
    <iframe height="100" id="resultFrame" src="resultFrame.html"></iframe> 
</body> 
</html> 

:ここに私の2つのページですIEと内部で問題はないと思う)

リセットボタンを押すと、「resultFrame found」と「resultFrame.Reset not found」が表示されます。それはフレームへの参照を持っているようですが、フレーム上で関数を呼び出すことはできません、なぜですか?

+1

http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page –

+0

[親ページのiframeにJavaScriptコードを呼び出す]の重複可能性があります(http: /contentions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page) – luk3yx

答えて

86

用途:

document.getElementById("resultFrame").contentWindow.Reset(); 

はインラインフレーム

document.getElementById("resultFrame") にリセット機能にアクセスするには、あなたのコードではiframeを取得します、とcontentWindowは、iframe内のウィンドウオブジェクトを取得します。子ウィンドウを取得したら、そのコンテキストでjavascriptを参照できます。

HERE特にbobinceの回答を参照してください。

+3

こんにちはJonathan、.contentWindowは引き続き動作しますか?私は 'console.log(document.getElementById( 'iframeID')。contentWindow)'を実行し、Firebugでは私のiframeに 'test()'関数を正しく表示していますが、関数を呼び出すときに関数ではないしかし、それはです!それをFF4でテストする。 –

2

objectframe.contentWindow.Reset()フレームのトップレベル要素を最初に参照する必要があります。

3

コール

window.frames['resultFrame'].Reset(); 
1

あなたがdocument.allの経由resultFrameにアクセスする場合、それが唯一のHTML要素ではなく、窓枠としてそれを引っ張ります。あなたが "this"自己参照を使ってフレームを起動させた場合、同じ問題が発生します。

は交換してください:

document.all.resultFrame.Reset(); 

で:

window.frames.resultFrame.Reset(); 

または:

document.all.resultFrame.contentWindow.Reset(); 
5

代わりにドキュメントからのフレームを得るための、ウィンドウオブジェクトからフレームを取得してみてください。上記の例では

この変更:

if (typeof (window.frames[0].Reset) == "function") 
    window.frames[0].Reset(); 
else 
    alert("resultFrame.Reset NOT found"); 

if (typeof (document.all.resultFrame.Reset) == "function") 
    document.all.resultFrame.Reset(); 
else 
    alert("resultFrame.Reset NOT found"); 

の問題はIFRAME内部のJavaScriptの範囲はIFRAMEのDOM要素を介して露出されないことです。ウィンドウオブジェクトにはフレームのjavascriptスコープ情報のみが含まれます。さらに堅牢性については

4

function getIframeWindow(iframe_object) { 
    var doc; 

    if (iframe_object.contentWindow) { 
    return iframe_object.contentWindow; 
    } 

    if (iframe_object.window) { 
    return iframe_object.window; 
    } 

    if (!doc && iframe_object.contentDocument) { 
    doc = iframe_object.contentDocument; 
    } 

    if (!doc && iframe_object.document) { 
    doc = iframe_object.document; 
    } 

    if (doc && doc.defaultView) { 
    return doc.defaultView; 
    } 

    if (doc && doc.parentWindow) { 
    return doc.parentWindow; 
    } 

    return undefined; 
} 

... 
var el = document.getElementById('targetFrame'); 

getIframeWindow(el).reset(); 
... 
2

満たされる必要があるまず第一の条件は、親とiframeの両方が同じ起源に属しているということです。それが完了すると、子はwindow.openerメソッドを使用して親を呼び出すことができ、親は上で述べたように子供のために同じことを行うことができます

0

このエラーが発生した場合、直接使用できない場合: フレームをブロックする原点 "http://www .. com"はクロスオリジンフレームにアクセスできません。 関数を直接使用する代わりにpostMessage()を使用できます。

関連する問題