Call javascript from Iframe to aspx page

Question

I have two pages a.aspx and b.aspx. a.aspx have an Iframe and I load the b.aspx page in that Iframe. Is it possible to call a javascript from b.aspx to a.aspx? Thanks in advance

Answer 1

One way to do this, which will also cover scenarios where you've got different origins for the outer page and the page in the IFrame (e.g. http://site1/a.aspx and http://site2/b.aspx) is to use the postMessage function.

This has the added advantage that you're "locking yourself in" to an API contract between a.aspx and b.aspx as, if you had a function called DoSomething in b.apx which was being called from a.aspx, if you decided to rename the function you'd need to make changes to both pages (and any other pages that hosted a.aspx in an IFrame). If you use the postMessage approach, the only place you'd need to change would be the listener for the "message" event in b.aspx.

If you put the following code in 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!
        }
    }
}

You could then call it (perhaps on a button click for testing purposes) by having:

sendMessageToEveryIFrame('Test message!');

You then need some code in b.aspx that reacts to messages coming in, for example:

// 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);
}

When you press the button in a.aspx in the browser (or whatever else you're using to trigger the call) b.aspx should pop up an alert window containing the text "Test message!".

Your receiveMessage function can then dispatch the request and effectively act as a broker. So, if you had two functions inside b.aspx that you wanted to call, you could re-jig the code like this:

In 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!
        }
    }
}

This means that callFrameFunction takes two parameters, the name of a function and the parameters for the function. You'd then update the code in b.aspx so that it looks more like this:

// 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;
    }
}

You can replace the calls to alert with calls to your functions, passing in the values in event.data.Parameters as appropriate.

Answer 2

Let's say you have the following javascript function in b.aspx.

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

And you want to call this function in a.aspx. a.aspx has b.aspx loaded in and iframe as follows.

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

This is how you'll call function DoSomething written in b.aspx from a function written in 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
}

This should work for you nice and easy!