javascript - 将一个 HTML 文档呈现到另一个 HTML 文档中

标签 javascript jquery html css

我有一个字符串代表一个独立的(有效的 XHTML 1.0 Strict)HTML 文档,类似于

var html = "<?xml ... <!DOCTYPE ... <html><head><style>...</style></head>
                  <body><table>...</table></body></html>";

此 HTML 文档的主体包含一个表格,其 CSS 样式 在 HTML 文档的头部描述。

我还有另一个 HTML 文档的 DOM 树。 如何将具有正确样式(如 HTML 字符串中所述)的表格的 DOM 树包含到此 DOM 树中?

我对基于 jQuery 的解决方案特别感兴趣。

编辑:更具体地说,我正在谈论的 HTML 字符串示例 嵌入到 this XML-document 中.

最佳答案

我可能错过了重点,但为什么不将字符串加载到 IFRAME 中进行渲染 - 这对我来说解决了拥有两个独立的 DOM 树和两组独立的 CSS 规则的所有问题。

这段代码可以做到:

$(function() {
        var $frame = $('<iframe style="width:200px; height:100px; border: 0px;">');
        $('body').html( $frame );
        setTimeout( function() {
                var doc = $frame[0].contentWindow.document;
                var $body = $('body',doc);
                $body.html(your_html);
        }, 1 );
});

(我从这里提取的:putting html inside an iframe (using javascript))

那么如果你担心 IFRAME 的大小,你可以这样设置:

$frame[0].style.height = $frame[0].contentWindow.document.body.offsetHeight + 'px';
$frame[0].style.width = $frame[0].contentWindow.document.body.offsetWidth + 'px';

关于javascript - 将一个 HTML 文档呈现到另一个 HTML 文档中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/752726/

相关文章:

html - 我可以在内部 CSS 中使用媒体查询吗,它会避免加载我定义的背景图像吗?

javascript - 对于定义低于其使用的函数,出现错误 ReferenceError

javascript - 允许按钮数组在单击后加载音频元素?

javascript - Chart.js 折线图工具提示显示错误的标签,当线条不是从第一个标签开始时

javascript - 更改 div 内容的 jQuery 脚本不能完全正常工作

javascript - 使用 jQuery 禁用选择时的表单字段

php - 我如何找出导致元素出现空格的原因? margin 和填充?

javascript - 在 json_encode 后按 asc 值对 javascript 数组进行排序

javascript - tr 的parentNode 未定义

javascript - 如何在浏览器中显示markdown内容(大概是用markdown.js?)