Javascript dom树修改

发布于 2024-08-28 08:08:47 字数 813 浏览 5 评论 0原文

使用javascript修改dom树的“body”的方法是什么：

Original htm:    <html> <head></head>   <body>  blah blah blah  </body>  </html>

Modified html:    <html>  <head> </head>  <abc> <body> blah blah blad </body> </abc> </html>

也就是说，我希望将整个body节点放入另一个节点中。

我正在尝试的代码是：

// Create an iframe

var orig_iframe = document.createElement('iframe');

// 在 iframe 中复制正文内容（希望如此！）

orig_iframe.contentDocument.innerHTML= document.body.innerHTML;

// 将文档正文设置为 null

document.body.innerHTML = '';

// 将 iframe 添加到 body

document.body.appendChild(orig_iframe);

这是行不通的。显然我错过了一些东西！

谢谢！

原文

Whats the wayto modify the "body" of a dom tree like this using javascript:

Original htm:    <html> <head></head>   <body>  blah blah blah  </body>  </html>

Modified html:    <html>  <head> </head>  <abc> <body> blah blah blad </body> </abc> </html>

That is, I wish to put the whole body node inside another node.

The code I am trying is:

// Create an iframe

var orig_iframe = document.createElement('iframe');

// Copy body's content inside iframe (hopefully!)

orig_iframe.contentDocument.innerHTML= document.body.innerHTML;

// Set document body to null

document.body.innerHTML = '';

// Add iframe to body

document.body.appendChild(orig_iframe);

which doesnt work. Obviously I am missing something!

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

感性不性感 2024-09-04 08:08:47

orig_iframe.contentDocument.innerHTML=document.body.innerHTML;

HTMLDocument 上没有 innerHTML 属性，只有 HTMLElement 上有。您可能希望在 iframe 文档的 body 元素上设置 innerHTML。

然而，动态编写 iframe 会导致浏览器出现一些问题。

var html= document.body.innerHTML;
var iframe= document.createElement('iframe');
document.body.appendChild(iframe);
var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
idoc.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body></body></html>');
idoc.close();
idoc.body.innerHTML= html;

contentWindow 的业务对于 IE 版本 7 之前是必需的，该版本不支持标准属性 contentDocument。

write() 调用是为了确保 iframe 中存在最小文档，以便您可以在其主体上设置 innerHTML。其中的 声明需要将该窗口置于标准模式（希望这也是您在主文档上使用的模式）。

虽然您可以将 document.write HTML 内容写入新文档，但这会导致正文中的任何

orig_iframe.contentDocument.innerHTML= document.body.innerHTML;

There's no innerHTML property on HTMLDocument, only on HTMLElement. You'd probably want to set innerHTML on the iframe document's body element.

However, writing iframes dynamically has some browser wrinkles.

var html= document.body.innerHTML;
var iframe= document.createElement('iframe');
document.body.appendChild(iframe);
var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
idoc.write('<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head></head><body></body></html>');
idoc.close();
idoc.body.innerHTML= html;

The business with contentWindow is necessary for IE up to version 7, which do not support the standard property contentDocument.

The write() call is to ensure that a minimal document is present in the iframe so that you can then set innerHTML on its body. The <!DOCTYPE declaration in it is required to put that window into Standards Mode (which is hopefully what you're using on the main document too).

Whilst you could document.write the HTML content to the new document, that would cause any <script> elements inside the body to execute again in the new document, which you probably don't want. Writing to innerHTML avoids immediate execution of any scripts in the string.

回复收藏 0 原文

~没有更多了~