从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 
} 

功能这应该给你很好的和简单的工作！