在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並訪問內容

回答

相關問題