2012-04-17 79 views
1

我有一个JavaScript函数,它执行AJAX和字符串操作的组合来产生完整的HTML页面作为字符串。如:我可以使用JavaScript中的内容预填充iframe吗?

var markup='<html><body>Hello world!</body></html>'; 

这是非常简化,我不能保证HTML结构是可预测的。我如何在页面上显示该内容?我认为iframe是最有意义的,因为字符串包含完整的HTML页面,但我不知道如何将标记注入到iframe中。

我不想创建另一个物理文件只是作为“代理”使用,所以我希望能够完全包含在一个HTML页面中的解决方案。

回答

4
var iframe = document.createElement("iframe"); 
var doc = iframe.contentDocument; // a about:blank 
doc.open(); 
doc.write(htmlstring); 
doc.close(); 

为我工作。我也在其data属性中使用了带有数据URI的<object>,例如,显示XML文档:

var object = document.createElement("object"); 
object.setAttribute('data', "data:text/xml, "+xmlstring); 

你也可以使用一个<object data="about:blank">而不是iframe来获得contentDocument覆盖。

+0

这很好。谢谢! – Jeff 2012-04-19 14:05:05

0

忘记iframe,查找jQuery.html()并修剪头部。

+0

我尝试这样做第一,但我遇到了异常的问题。在jQuery对象中包装标记是返回一个数组而不是一个dom元素。这可能是另一个SE问题。 – Jeff 2012-04-17 17:02:09

-1

使用jQuery,你可能只是这样做:

或者,如果你可以剔除标签你不想:

markup = markup.replace(/(</?html>|</?body>)/gi, ""); 
$('#divId').html(markup); 

注:我不知道输入的HTML是什么样的,所以确保你可以真正地去掉在运行此代码之前,请使用HTML。这是一个帮助你入门的例子。

这是用DIV这样的:

<div id="divId">Content will go here</div> 
+0

-1用正则表达式“解析”html。此外,您的尝试不会修剪标签,如头部,元,标题等等。 – BiAiB 2012-04-17 16:43:43

+0

注意我说过“如果可以”。这只是一个例子。我不知道他的应用程序的要求是什么。 – 2012-04-17 16:44:42

+0

我试过'$('#iframe')。html(标记)',但iframe只是空着。它应该能够像那样工作吗? – Jeff 2012-04-17 17:08:55

1

您可以从jQuery的改变iframe的HTML这样

function get_me_html(){ 
    return '<html><body>Hello world!</body></html>' 
} 

$('iframe').contents().find('html').html(get_me_html()) 

看到这里的行动http://jsfiddle.net/anuraguniyal/Kegc3/7/

+0

这工作,差不多。我看到它闪烁,然后消失。然后iframe是空白的。我怀疑其他js功能可能会干扰,但我没有太多的疑难解答,因为Bergi的答案马上就能解决。 – Jeff 2012-04-19 14:07:00

相关问题