У меня есть проблема, которую я еще не смог решить сам.
Короче говоря: я пишу приложение openui5, которое преобразует XML в HTML, и я хочу, чтобы оно выводило преобразованный HTML на той же странице.
Однако, когда я добавляю объект HTML-документ в мой DOM, это влияет на «внешний» HTML (приложение UI5).
Проблемы:
- Нажатие на ссылку (href = "# section") во встроенном HTML-коде изменяет хэш сайта (таким образом, нарушая механизм маршрутизации UI5)
- CSS во встроенном HTML применяется к внешнему HTML
- загрузка встроенного тела не выполняется
Поэтому мне нужно встроить объект Document в DOM.
Встраивание статического HTML работает следующим образом:
<embed src="embed.html"/>
В этом случае полученный DOM выглядит как здесь . Перечисленные выше проблемы не существуют.
Однако мой преобразованный HTML - это не файл на сервере, а созданный во время выполнения на клиенте; поэтому мне нужно встроить объект Document (или DocumentFragment).
Если я сделаю это следующим образом: (sHtml содержит строку HTML, target - это идентификатор <div>) ...
function embed() {
var oHtml = new DOMParser().parseFromString(sHtml, "text/html"),
oTarget = document.getElementById("target");
oTarget.appendChild(oHtml.documentElement);
}
... проблемы выше do существуют. Внешнее тело HTML синее, потому что стиль внутреннего говорит, что элементы тела - это.
Самое главное, что хеш меняется при нажатии на ссылку.
В данном случае DOM: см. Здесь
Итак, мой последний вопрос:
Можно ли даже обработать узел документа HTML, как если бы он был внешним?
Я пытался использовать <embed>, <div>, <iframe> и другие сценарии добавления содержимого документа в DOM, но если это просто не сработало.
Это , как выглядит мое приложение UI5.
Так что, надеюсь, кто-нибудь может помочь мне с этой проблемой:)
Спасибо очень заранее!
Леннарт
Вот мои минимальные примеры, если вы хотите играть:
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>