Javascript JQuery插入脚本&;将HTML转换为Iframe
我试图在iframe中插入一个脚本&HTML。我的问题是我可以将HTML附加到iframe,但我不能附加它,也不能保留iframe的源代码 最终目标是将HTML加载到iframe源代码中并具有覆盖。请告知。 我想这件事我有点不对劲Javascript JQuery插入脚本&;将HTML转换为Iframe,javascript,jquery,html,iframe,Javascript,Jquery,Html,Iframe,我试图在iframe中插入一个脚本&HTML。我的问题是我可以将HTML附加到iframe,但我不能附加它,也不能保留iframe的源代码 最终目标是将HTML加载到iframe源代码中并具有覆盖。请告知。 我想这件事我有点不对劲 $(function() { var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="https://www.google.com" width="100
$(function() {
var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="https://www.google.com" width="100%" height="100%" style="width:100%; height:100%;position:relative;">');
$('body').html( $frame );
setTimeout( function() {
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
$body.html('<div id="cursor" style="position:absolute;style:z-index:999999;"><img width="80" src="/assets/img/cursor_blue.png" /></div>');
$body.html('<p id="test" style="z-index:9999999;">The queue length is: <span></span></p>');
}, 1 );
});
$(函数(){
变量$frame=$('');
$('body').html($frame);
setTimeout(函数(){
var doc=$frame[0]。contentWindow.document;
变量$body=$('body',doc);
$body.html('Test');
$body.html(“”);
$body.html(“队列长度为:
”;
}, 1 );
});
以下是您可以做的。
创建具有空src属性的iframe。给它一些id。对所需的url进行ajax调用以获取所有html并将其附加到iframe的主体中。现在,在同一iframe中附加任何您希望添加的附加HTML。我已经在JSFIDLE中测试了该方法,请检查
$(函数(){
变量$frame=$('');
$('body').html($frame);
var$body=$(“#视图框”).contents().find('body');
$.ajax(
{
url:“/echo/html/”,
方法:'POST',
成功:功能(数据){
$body.append(数据);
$body.append(“通过脚本添加的文本”)
},
数据:{html:“文本回显到请求来自页面的文本”}
});
});
这是一个好主意,在插入HTML后,是否可以将源代码添加到其中?现在将src附加到该文件上的示例是什么?
$(function() {
var $frame = $('<iframe class="viewTrackingFrame" id="viewframe" src="" width="100%" height="100%" style="width:100%; height:100%;position:relative;">');
$('body').html( $frame );
var $body = $("#viewframe").contents().find('body');
$.ajax(
{
url:"/echo/html/",
method:'POST',
success:function(data){
$body.append(data);
$body.append("<h1>Text added by script</h1>")
},
data: {html: "<p>Text echoed back to request</p><h2>Text from page</h2>"}
});
});