Load external html in Iframe and access the contents

Question

I need to know how to access the iframe contents when we are loading an external page with only giving src attribute.

I am using an iframe to load an HTML page inside a jquery dialog box. Here I am not able to modify the contents (pre-populate the contents of HTML form)

   var page = "form.html";
   var $dialog = $('<div id="myDialog"></div>')
  .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')

I have looked here but it doesn't work as it does not know contents of an HTML yet (probably this is the reason I know)

I am saying this because when I trying to load whole html in iframe like this-

.html('<form >From <input id=senderemailAddresss type="text" class="w3-input w3-border" value="'+mailId +'"size="25" readonly><br>To <input id=receiveremailAddresss class="w3-input w3-border" type="text"  size="25"><br>Subject<input id=title class="w3-input w3-border" type="text"> <br>Messgae <textarea id=message class="w3-input w3-border"  style="height:60px type="text" rows="4" cols="20"></form>')

Everything works fine. I am able to access the contents then.

But if I load externally it only has access to attribute which I gave while loading time like src, width and height.

How I can know what is contents of HTML and modify them or there is any alternative way to load external HTML inside a jquery dialog and modify it?

Full Code is here -

var page = "form.html";
               var $dialog = $('<div id="myDialog"></div>')
               .html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
               .dialog({
                   autoOpen: false,
                   modal: true,
                   height: 485,
                   width: 550,
                   draggable: false,

                   buttons: { 
                        "Send": 
                        function() 
                        {   scopes.sent = 0;
                            var email = $("#receiveremailAddresss").val();
                            var title = "The Execution Detail for the Rule: "+maintitle
                            var message = $("#message").val();
                            sendEmail(email,title,message,$(this));
                        }, 
                        "Cancel": 
                        function() 
                        { $(this).dialog("close"); }

                        }, 
                   open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", ui.dialog | ui).hide();

                    $(this).find('#title').val("The title is : "+maintitle);
                    $(this).find('#message').val("Message is :"+ message );
                   $(".ui-dialog-titlebar").hide();
                   $(this).css('overflow', 'auto');
                    $(this).css({
                    'font-size' :'12px'
                    });
                   }
                  });
                 $dialog.dialog('open');

And this is HTML page

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">

    <style>
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
.w3-border-red,.w3-hover-border-red:hover{border-top:1px solid #f44336!important; border-bottom:1px solid #f44336!important ; border-left:1px solid #f44336!important;border-right:1px solid #f44336!important  }
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#bbb!important}
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:95%}
</style>    
   </head>

   <body>
    <form>
        From<br>
        <input id="senderemailAddresss" type="text" class="w3-input w3-border"  value=""  readonly /><br>
        To<br>
        <input id="receiveremailAddresss" class="w3-input w3-border" type="text"/><br>
        Subject<br>
        <input id="title" class="w3-input w3-border" type="text"/> <br>
        Messgae <br>
        <input id="message" class="w3-input w3-border"  style="height:60px" type="text" rows="4"/>
    </form>

   </body>
</html>

I'm pretty sure you can't modify the contents of an iframe, only view. — brt, Jun 02 '17 at 15:10
@brt If the iframe is from the same domain as the host page, both have full access to each other. If it is from a different domain, no access at all. There's no case where you get read-only access. — Michael Geary, Jun 06 '17 at 06:22

score 1 · Accepted Answer · 2017-06-02T15:23:12.593

1

I'd recommend using .load instead of a iframe. Then the content will be accessable easily through the code you have

var page = "form.html";
var $dialog = $('<div id="myDialog"></div>').load(page,function(){
     $dialog.dialog
         ......
});

edited Jun 02 '17 at 15:23

answered Jun 02 '17 at 15:11

I have tried this also but I am not able to modify values then also – shv22 Jun 02 '17 at 15:14
Might be a timing thing, I've updated the answer to do the work once the content is loaded. – Jun 02 '17 at 15:23

Load external html in Iframe and access the contents

1 Answers1

Linked