Question

我正在编写一个执行以下操作的程序：

在DOM中创建iframe
向页面（网站的主页）发出AJAX请求
如果页面已更改，我会将iframe.srcdoc = contents;用于iframe，其中contents是从AJAX返回的内容

请注意，这样任何指定了相对URL的图像等都无法正确呈现。为了使其看起来正确，我必须向<base>添加<head>标记。

我非常不愿意像这样使用正则表达式：

contents = contents.replace('<head>','<head><base href="http://www.example.com/">');

因为它可能会让事情变得充实（但是，我是否过于谨慎和过度偏执？）。

注意：我不能通过操作DOM来做到这一点：如果我iframe.srcdoc = contents;和然后添加<base>标记，页面仍然会渲染不正确。 <{1}}标记需要在之前我将其分配给<base> ...

你会怎么做？

Merc的。

Answer 1

使用appendChild DOM操作添加元素。

document.getElementsByTagName('head')[0].appendChild('<base href="http://www.site.com" />');

Answer 2

我认为使用appendChild字符串值并不是最好的主意，所以这是我的方法。

// create new "base"-node
var node = document.createElement('base');
// set href="http://www.site.com"
node.setAttribute('href', 'http://www.site.com');
// append new "base"-node to first "head"-node in html-document
document.getElementsByTagName('head')[0].appendChild(node);

有关DOM操作，DOM理解和Javascript参考的详细信息，请参阅W3-School The HTML DOM (Document Object Model)。

使用字符串操作注入“base”-tag的解决方案（种类为“非dom-offline”）是Regex在关闭head-tag之前添加base-tag。

contents = contents.replace(/<\/head>/ig, '<base href="http://www.site.com" />$&');

另一个解决方案是使用jQuery构建iframe内容的“offline-DOM”并使用DOM-Manipulation-Methods。

contents = jQuery(contents).find('head:first').append('<base ... />').html()
// no guarantee here that this will work ;-) it was just out of my mind, but should work.

在Javascript中可靠地添加标签

2 个答案: