Accessing Element of frame from other frame in Javascript

Question

How to access a element of a frame from other frame. For Ex:

Main.html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head> 
    <frameset rows="33%,33%,*">
        <frame class="fra" src="frame1.html"/>
        <frame class="fra" src="frame2.html"/>
    </frameset>
</html>

frame1.html:

<html>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </HEAD>
    <body>
        <b><p id="para"> This is frame one.html </p></b>
    </body>
</html>

frame2.html:

<html>
    <HEAD>
        <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </HEAD>
    <body>
        <b><p id="para"> This is frame two.html </p></b>
        <button id="but"> Get data </button>
        <script>
            $(document).ready(function(){
                $("#but").click(function(){
                    alert(window.frames[0].document.getElementById('para'));
                });
            });
        </script>
    </body>
</html>

Once the button is clicked from frame2 then I need to get the data of "para" id element which is present in frame1. So, I tried to access the element as showed below. But it is not worked.

    window.frames[0].document.getElementById('para')

It shows the error as:

Uncaught TypeError: Cannot read property 'document' of undefined

So, window.frames[0] itself undefined .Can any one help me to solve this?

Due to security using parent to access parent then other frame the browser will block the action , see this answer — Bourbia Brahim
– Bourbia Brahim, Commented Mar 6, 2017 at 13:58
Possible duplicate of SecurityError: Blocked a frame with origin from accessing a cross-origin frame — Bourbia Brahim
– Bourbia Brahim, Commented Mar 6, 2017 at 13:59

Michaël Fontaine · Accepted Answer · 2017-10-10 09:34:05Z

2

You should put id on your iframes, like "iframe1" and "iframe2".

    <frame class="fra" src="frame1.html" id="frame1" />
    <frame class="fra" src="frame2.html" id="frame2" />

Then:

$(window.parent.document).find("#iframe1").contents().find("#para")

should give you access from iframe2 to the element with id "para" in frame one.

$(window.parent.document) will allow you to return from iframe2 to the main document, then find iframe1, then contents() will allow you to go inside iframe1 where you'll be able to find the "#para" element.

answered Oct 10, 2017 at 9:34

Michaël Fontaine

565 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing Element of frame from other frame in Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related