Accessing function of iframe

Question

I have a window in which I am loading an iframe.

The location of the window is

"http://localhost/current/test.html"

and the location of the iframe is

"http://localhost/current/testFrame.html"

And a script in my test.html is trying to access a function which is present in the scope of iframe window. But it is giving Permission Denied.

For eg From my main window I am executing this line of script

$("iframe")[0].contentWindow.getState();   //Permission Denied

And i am trying to access that function when the iframe is completely loaded.

How can the parent window access the function of iframe as both windows are in the same origin.

So strange you getting CORS problem with same domain pages. Check [this](http://stackoverflow.com/a/364997/1267304) out. — DontVoteMeDown, Nov 12 '14 at 13:35
You have to make a research before asking. [old question][1] [1]: http://stackoverflow.com/questions/1600488/calling-javascript-function-in-iframe — Mr_Thorynque, Nov 12 '14 at 13:39

score 1 · Accepted Answer · answered Nov 12 '14 at 14:11

you should use javascript postMessage and create a cross window API system

for example:

parent.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>parent</title>
    <script>
        function iframeAction(actionId){
            var iframe = document.getElementById('myIframe');
            iframe.contentWindow.postMessage(actionId,'*');
        }
    </script>
</head>

<body>
    <button type="button" onclick="iframeAction(1)">do iframe action 1</button>
    <button type="button" onclick="iframeAction(2)">do iframe action 2</button>
    <br>
    <iframe src="./iframe.html" id="myIframe" />
</body>

</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>parent</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>

        //page generic functions
        function doActoin_1(){$("#labal").html("Action 1");}
        function doActoin_2(){$("#labal").html("Action 2");}

        // Listen to message from parent
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

        eventer(messageEvent,function(e) {
            switch(e.data){
                case 1: doActoin_1(); break;
                case 2: doActoin_2(); break;
            }           
        },false);

    </script>

</head>

<body>
    <h1 id="labal">iFrame</h1>
</body>

</html>

As you can see that the iframe.html contains normal javascript function, But by adding a window listener you are able to create a dynamic API for ader windows to use.

hope this will help.

Donatas Bacius · Answer 2 · 2014-11-12T14:35:09.067

Another way of achieving what you want would be using window.postMessage to kick of the inner function and use another message to return the result to the parent.

In iframe:

window.addEventListener("message", function(e) {
   var state = getState();
   e.source.postMessage(state, "*");
}, false);

In the parent:

window.addEventListener("message", function(e) {
  var state = e.data; //do something with your data
}, false);

$("iframe")[0].contentWindow.postMessage("getState", "*");

Just replace the * with your domain. More details can be found here.

jaibatrik · Answer 3 · 2014-11-12T13:40:58.527

-2

You can access an iframe using window.frames property.

window.frames[0] should give first iframe.

Example -

 <iframe name="frame1" src="testframe.html"></iframe>

can be accessed with

window.frames["frame1"]

should give the window object for the iframe.

edited Nov 12 '14 at 13:40

answered Nov 12 '14 at 13:32

jaibatrik

6,770
9
33
62

1

UM, how is that any different than `$("iframe")[0]`? – epascarello Nov 12 '14 at 13:34
1

I'm not sure if this answers the question. – DontVoteMeDown Nov 12 '14 at 13:34
Not sure about the jQuery part, does it return the window object? – jaibatrik Nov 12 '14 at 13:42

Accessing function of iframe

3 Answers3