在Iframe中加载外部html并访问内容 [英] Load external html in Iframe and access the contents
问题描述
当我们加载一个只提供src属性的外部页面时，我需要知道如何访问iframe内容。
I need to know how to access the iframe contents when we are loading an external page with only giving src attribute.
我使用iframe加载HTML jquery对话框中的页面。在这里，我无法修改内容（预先填充HTML表单的内容）
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>')
我看了这里但它不起作用，因为它还不知道HTML的内容（可能这就是我知道的原因）
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)
我这样说是因为当我尝试像这样在iframe中加载整个html -
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.
但是如果我在外部加载它只能访问我在加载时间时给出的属性，如src，width和height。
But if I load externally it only has access to attribute which I gave while loading time like src, width and height.
我怎么知道什么是HTML的内容并修改它们，或者在jquery对话框中加载外部HTML并修改它有什么替代方法？
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');
这是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>
推荐答案
我建议使用。加载而不是iframe。然后，您可以通过您拥有的代码轻松访问该内容
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
......
});
这篇关于在Iframe中加载外部html并访问内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
