Question

我有一个htmlString。我将该字符串放入iframe中。代码是

var iframe = document.createElement('iframe'); 
var html = '<html> <head></head> <body> //contents </body> </html>';

document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

现在我要做的是插入标签

<base href="some url" >

进入htmlString的头部。然后我想将iframe附加到dom中并将htmlString写入iframe。

如何在将htmlString插入iframe之前对其进行操作？

Answer 1

在这里：https://jsfiddle.net/tjcwyem6/

我使用了以下JavaScript：

var iframe = document.createElement('iframe'),
    html = '<html> <head></head> <body> //contents </body> </html>',
    newurl = "https://www.facebook.com/",
    basehref = "<base href='" + newurl + "'>",
    n = html.indexOf("</head>");

var newhtml = [html.slice(0, n), basehref, html.slice(n)].join('');

document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(newhtml);
iframe.contentWindow.document.close();

console.log(newhtml);

我的修改执行以下操作：

将您的网址值存储在newurl。
将其放入字符串basehref。
获取</head>所在的HTML字符串中的位置。
通过切片和连接字符串将basehref添加到newhtml。

Answer 2

您可以使用jquery（例如

）追加iframe内容

$("iframe").contents().find("head").append('<base href="some url" >');

Answer 3

你可以通过将html加载到jquery中来操作html，并使用jquery来操作：

var xml = $.parseXML("<html> <head></head> <body> //contents </body> </html>");    
$("head", xml).append("<base url='x'/>")

var html;
if (window.ActiveXObject) {
    html = xml.xml;
} else {
    html = (new XMLSerializer()).serializeToString(xml);
}

iframe.contentWindow.document.write(html);

This answer用于xml到html的详细信息

你不能将html作为html加载到jquery中，因为它会剥离body / head。

Answer 4

String.prototype.insertAt=function(index, string) { 
        return this.substr(0, index) + string + this.substr(index);
}
var myhtml = "<html> <head></head> <body></body> </html>";
var m = myhtml.indexOf("</head>");
myhtml = myhtml.insertAt(m, '<base href="some url" >');
console.log(myhtml);

在插入DOM之前操作html字符串

4 个答案: