在iframe中加载外部html并访问内容

我只需要提供src属性即可加载外部页面时，我需要知道如何访问iframe内容。在iframe中加载外部html并访问内容

我正在使用iframe在jquery对话框中加载HTML页面。在这里，我不能修改内容（预填充HTML表单的内容）

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

我看过here，但它不工作，因为它不知道的HTML内容，但（可能这是我知道原因）

我这样说是因为当我试图在iframe中加载整个HTML像这个 -

.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>')

，一切工作正常。然后我可以访问这些内容。

但是，如果我从外部加载，它只能访问加载时间如src，width和height时给出的属性。

我怎么知道什么是HTML的内容，并修改它们，或者有任何其他方式来加载jQuery对话框中的外部HTML并修改它？

完整的代码在这里 -

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');

这是HTML页面

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

来源

2017-06-02 shv22

我敢肯定你不能修改iframe的内容，只能查看。 – brt

@brt如果iframe来自与主机页面相同的域，则两者都可以完全访问对方。如果它来自不同的域，则根本无法访问。在任何情况下您都可以获得只读访问权限。 –

我推荐使用.load，而不是一个iframe中。那么内容将很容易通过你的代码访问

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

来源

2017-06-02 15:11:41

我也试过这个，但是我不能修改值然后 – shv22

可能是一个时间的事情，我已经更新了答案，一旦内容加载完成工作。 –

是的，你是对的......谢谢 – shv22

在iframe中加载外部html并访问内容

回答

相关问题