Question

我有一个尚未解决自己的问题。长话短说：我正在编写一个openui5应用程序，该应用程序将XML转换为HTML，并且希望它在同一页面上输出转换后的HTML。但是，当我将HTML Document对象附加到我的DOM中时，它会影响“外部” HTML（UI5应用程序）。

问题：

单击嵌入式HTML中的链接（href =“＃section”）会更改网站的哈希值（从而干扰了UI5路由机制）
嵌入式HTML中的CSS应用于外部HTML
嵌入式主体的加载未执行

因此，我需要将Document对象嵌入到DOM中。

嵌入静态HTML的过程如下：

<embed src="embed.html"/>

在这种情况下，生成的DOM看起来像here。上面列出的问题不存在。

但是，转换后的HTML不是服务器上的文件，而是在客户端运行时生成的；所以我必须嵌入一个Document对象（或DocumentFragment）。

如果我这样做是这样的：（sHtml包含HTML字符串，target是<div>的ID）...

function embed() {
    var oHtml = new DOMParser().parseFromString(sHtml, "text/html"),
        oTarget = document.getElementById("target");

    oTarget.appendChild(oHtml.documentElement);
}

...存在要做的问题。外部HTML的主体为蓝色，因为内部样式表示body元素为。最重要的是，单击链接时，哈希值会发生变化。

在这种情况下的DOM：see here

所以我的最后一个问题是：

是否甚至可以将HTML Document节点视为外部节点？

我尝试使用<embed>，<div>，<iframe>以及将文档内容添加到DOM的不同方案，但如果不起作用。 This是我的UI5应用的外观。

所以希望有人可以帮助我解决这个问题：）

非常感谢您！

Lennart

这些是我想玩的最简单的例子：

index.html：

<html>
    <head>
        <title>Embedding</title>
        
        <script type="text/javascript">
            var sHtml =
            "<html>\
                <head>\
                    <style type=\"text/css\">\
                        body {\
                            background: lightskyblue;\
                        }\
                    </style>\
                </head>\
\
                <body onload=\"alert('embedded')\">\
                    <div style=\"position: absolute; left: 100px\">\
                        <span>I'm embedded.</span>\
                        <a href=\"#my-section\">Link</a>\
                    </div>\
                </body>\
            </html>";
            
            function embed() {
                var oHtml = new DOMParser().parseFromString(sHtml, "text/html"),
                    oTarget = document.getElementById("target");
                
                oTarget.appendChild(oHtml.documentElement);
            }
        </script>
    </head>
    
    <body onload="embed()">
        <span>I'm outside.</span>
        <div style="position: absolute; left: 300px; width: 500px; height: 300px; background: yellow">
<!--            <embed src="embed.html"/>-->
            <div id="target"/>
        </div>
    </body>
</html>

embed.html：

<html>
    <head>
        <style type="text/css">
            body {
                background: lightskyblue;
            }
        </style>
    </head>
    
    <body onload="alert('embedded')">
        <div style="position: absolute; left: 100px">
            <span>I'm embedded.</span>
            <a href="#my-section">Link</a>
        </div>
    </body>
</html>

如何在不影响外部站点的情况下将HTML Document对象嵌入DOM？

是否甚至可以将HTML Document节点视为外部节点？

0 个答案: