從iframe調用javascript到aspx頁面

Question

我有兩頁a.aspx和b.aspx。 a.aspx有一個Iframe，我加載該Iframe中的b.aspx頁面。是否可以撥打javascript從b.aspx到a.aspx？ 在此先感謝做到這一點

Answer 1

的一種方式，這也將涵蓋您在IFrame中得到了外頁和頁面不同來源的場景（例如http://site1/a.aspx和http://site2/b.aspx）是使用postMessage功能。

這有額外的好處，你「自己鎖定在」以a.aspx和b.aspx之間的API合同，如果你有一個在b.apx稱爲DoSomething功能，正在從a.aspx調用，如果你決定重新命名功能，您需要對兩個頁面（以及在IFrame中託管a.aspx的任何其他頁面）進行更改。如果您使用postMessage方法，則唯一需要更改的地方是b.aspx中的「消息」事件的偵聽器。

如果你把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應彈出一個包含文本「測試消息！」的警報窗口。

您的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有兩個參數的名稱，函數和函數的參數。然後你會在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; 
    } 
} 

你可以調用你的函數替換調用alert，傳遞值適當event.data.Parameters。

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的寫在b.aspx從寫在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 
} 

功能這應該給你很好的和簡單的工作！