JavaScriptをIframeからaspxページに呼び出します

Question

私はa.aspxとb.aspxという2つのページを持っています。 a.aspxにはIframeがあり、b.aspxページにはIframeというページが読み込まれます。 javascriptをb.aspxからa.aspxに電話することはできますか？また、IFrameの（例えばhttp://site1/a.aspxとhttp://site2/b.aspx）であなたが、外側のページの異なる起源を持っているシナリオとページをカバーするこれを行うには 事前に感謝

Answer 1

一つの方法は、postMessage機能を使用することです。

これは、あなたがa.aspxから呼び出されていたb.apxにDoSomethingと呼ばれる機能を持っていた場合は、名前を変更することを決めた場合は、としてa.aspxとb.aspx間のAPI契約に「の中で自分自身をロック」しているという利点もあり両方のページ（およびIFrame内でa.aspxをホストしていた他のページ）に変更を加える必要があります。 postMessageアプローチを使用する場合、変更する必要があるのは、b.aspxの "message"イベントのリスナーだけです。

あなたはa.aspxに次のコードを配置した場合：

function sendMessageToEveryIFrame(message) 
{ 
    /// <summary>Call a function against all frames</summary> 
    var frames = document.getElementsByTagName('iframe'); 

    for (var i = 0; i < frames.length; i++) 
    { 
     try 
     { 
      var frame = frames[i]; 

      frame.contentWindow.postMessage(message, "*"); 
     } 
     catch (e) 
     { 
      // Code to handle errors would go here! 
     } 
    } 
} 

をあなたはその後、持っていることによって（おそらくテスト目的のためにボタンのクリックで）それを呼び出すことができます。

sendMessageToEveryIFrame('Test message!'); 

あなたはその後、いくつかのコードを必要とします入ってくるメッセージに反応するb.aspxにあります。

// This wires up your function that processes the message 
window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    // logic that reacts to the event/message goes here 
    alert(event.data); 
} 

ブラウザのa.aspxのボタンを押すと、b.aspxが "Test message！"というテキストを含むアラートウィンドウを表示するはずです。

receiveMessageファンクションは、要求をディスパッチし、効果的にブローカとして機能します。あなたが呼び出すために望んでいたb.aspx内部の二つの機能を持っていたのであれば、次のようなコードを再ジグができます：a.aspxで

：

function callFrameFunction(functionName, parameters) 
{ 
    /// <summary>Call a function against all frames</summary> 
    var frames = document.getElementsByTagName('iframe'); 

    for (var i = 0; i < frames.length; i++) 
    { 
     try 
     { 
      var frame = frames[i]; 

      var message = 
       { 
        Function: function, 
        Parameters : parameters 
       }; 
      frame.contentWindow.postMessage(message, "*"); 
     } 
     catch (e) 
     { 
      // Code to handle errors would go here! 
     } 
    } 
} 

これはcallFrameFunctionは、2つのパラメータの名前を取ることを意味し関数とその関数のパラメータ。それはより多くのように見えるようにあなたは、その後b.aspxでコードを更新したい：

// This wires up your function that processes the message 
window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    // logic that reacts to the event/message goes here 
    switch(event.data.FunctionName) 
    { 
     case "function 1": 
      alert('Function called was \'function 1\''); 
      break; 
     case "function 2": 
      alert('Function called was \'function 2\''); 
      break; 
    } 
} 

あなたは適宜event.data.Parametersに値を渡し、あなたの関数への呼び出しでalertへの呼び出しを置き換えることができます。

Answer 2

b.aspxに次のjavascript関数があるとします。

function DoSomething() 
{ 
    //Do you required tasks 
} 

a.aspxでこの関数を呼び出したいとします。 a.aspxにはb.aspxが、iframeには次のようにロードされています。

<iframe id="fraExample" name="fraExample" scrolling="no" src="b.aspx"></iframe> 

これは、あなたがdoSomethingのこれはあなた素晴らしく、簡単のために働く必要がありますa.aspx

function CallFunction() 
{ 
    // This function will be in a.aspx 
    // some tasks 

    var bFrame = document.getElementById('fraExample'); // Get the iframe 
    bFrame.contentWindow.DoSomething(); 

    // some other tasks 
} 

で記述された関数からb.aspxで記述された機能を呼ぶことにします方法です！