How to access html elements in iframe inside html tag

Question

I have a html file which contains iframe like below lines of code. Note that this iframe is displayed by one of tiny mce jquery and is rendered in browser as below

 <html>
 <body>
   <textarea id="texteditor"></textarea>
   <div class="mceeditor">
     <iframe>
       <html>
         <body>
           <script type="text/javascript">

     function mySubmit() {
         var URL = "http://localhost:61222/14CommunityImages/hands.png";

         window.document.getElementById("texteditor").value = URL;
               }
          </script>
          </body>
       </html>  
     </iframe>
    </div>
   </body>
 </html>

Now my goal is to append var url inside text area which is in parent html tag. Please help me !!!

move the script out of the iframe and into the parent page, then just select the nodes. — Shilly, Aug 24 '15 at 09:12

T.J. Crowder · Answer 1 · 2015-08-24T09:27:54.187

The document in the iframe can access its parent window via parent, and its parent window's document via parent.document. So:

parent.document.getElementById("texteditor").value = URL;

Note: To access each-other's documents, the main document and the iframe must be on the same origin. If they're on different origins, they can still communicate, but only if they both do so expressly, via web messaging.

Side note: Your iframe, as shown in the question, won't work. Inline content in iframes is for display when the browser doesn't support iframes. You use a separate resource (e.g., page) identified by the src attribute (or you use the srcdoc attribute; I have no idea how well supported it is), for the iframe's content.

E.g.:

Main page:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
<body>
<textarea id="texteditor"></textarea>
<div class="mceeditor">
    <iframe src="theframe.html"></iframe>
</div>
</body>
</html>

theframe.html:

<!doctype html>
<html>
    <body>
        <input type="button" value="Click to set" onclick="mySubmit()">
        <script type="text/javascript">
            function mySubmit() {
            var URL = "http://localhost:61222/14CommunityImages/hands.png";

            parent.document.getElementById("texteditor").value = URL;
            }
        </script>
    </body>
</html>

Still worth noting that reverse access is not permitted, you cannot access iframe document from parent document. — Medet Tleukabiluly, Aug 24 '15 at 09:16
Oh, didn't know, thanks!, Also found this great [answer](http://stackoverflow.com/questions/8066547/getting-parents-document-from-iframe) — Medet Tleukabiluly, Aug 24 '15 at 09:19
@user2179026: It works fine. If it's not working, there's something going on you haven't mentioned in the question. — T.J. Crowder, Aug 24 '15 at 09:20

How to access html elements in iframe inside html tag

1 Answers1