从Iframe调用javascript到aspx页面[重复]答案

【问题标题】：Call javascript from Iframe to aspx page [duplicate]从Iframe调用javascript到aspx页面[重复]
【发布时间】：2018-01-02 21:41:54
【问题描述】：

我有两个页面a.aspx 和b.aspx。 a.aspx 有一个Iframe，我在那个Iframe 中加载了b.aspx 页面。是否可以从b.aspx 调用javascript 到a.aspx？提前致谢

【问题讨论】：

显示你到目前为止所做的代码
你的意思是 iFrame 吗？

标签： javascript asp.net iframe

【解决方案1】：

假设您在 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>

这就是你将如何从用a.aspx 编写的函数调用用b.aspx 编写的函数DoSomething

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
}

这对你来说应该很容易！

【讨论】：

【解决方案2】：

执行此操作的一种方法是使用postMessage 函数，该方法还将涵盖外部页面和 IFrame 中的页面具有不同来源的情况（例如http://site1/a.aspx 和http://site2/b.aspx）。

如果您在 b.apx 中有一个名为 DoSomething 的函数是从 @ 调用的，那么这还有一个额外的好处，即您将自己“锁定”在 a.aspx 和 b.aspx 之间的 API 合约中987654329@，如果您决定重命名函数，则需要对两个页面（以及在 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 中的值。

【讨论】：