Как я могу назначить iframe для внутреннего HTML элемента div?
Я пытаюсь присвоить iframe внутреннему HTML элемента div, но не могу понять, как его отобразить. Вот некоторые соответствующие фрагменты
function showText(debugElement, message) {
if (debugElement != null) {
debugElement.innerHTML = message;
}
}
function escapeHtml(html){
var text = document.createTextNode(html);
var p = document.createElement('p');
p.appendChild(text);
return p.innerHTML;
}
function getDebugText(request) {
var responseText = "";
try {
var responseJSON = JSON.parse(request.response);
for (const [key, val] of Object.entries(responseJSON)) {
responseText += ` ${key}: ${val}\n`;
}
} catch(error) {
if (request.responseText.startsWith('<!doctype html>')) {
responseText = `<div>${request.statusText}</div><iframe scrolling = "yes" style = "width: 100%;" srcdoc = "${escapeHtml(request.responseText)}"></iframe>`
} else {
responseText = escapeHtml(`${request.statusText}\n${request.responseText}`);
}
}
console.info(responseText)
return responseText;
}
достаточно сказать, что где-то есть что-то вроде
showText(document.getElementByID('details'), getDebugText(response))
Я вижу визуализированный кадр, но в нем нет никакого содержимого. Я видел другие ответы, которые делают что-то вроде document.appendChild(iframe), но не могу понять, как это сделать с именованным div.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша проблема, вероятно, заключается здесь:
<iframe scrolling = "yes" style = "width: 100%;" srcdoc = "${escapeHtml(request.responseText)}"></iframe>
Попробуйте создать этот элемент с помощью JavaScript, затем вы сможете присвоить атрибут srcdoc через объект элемента iframe (вам даже не понадобится экранировать request.responseText, поскольку JavaScript сделает это за вас...
Затем вы прикрепляете его к debugElement внутри вашей showText функции.
Обратите внимание, что не все браузеры поддерживают атрибут srcdoc...
const MyFrame = document.createElement('iframe');
MyFrame.srcdoc = "<b>TESTING ESCAPABLE CHARACTERS:" +
'"' + "'" + '\\' + '<' + '>' + '</b>';
// This will work... But will keep adding frames instead of replacing...
// MyFrameContext.appendChild(MyFrame);
// This will just replace anything that was there with your iFrame.
MyFrameContext.replaceChildren(MyFrame);<div id='MyFrameContext'>
<!-- Here goes your dynamic iFrame -->
</div>Это отлично работает для меня.
Спасибо! Мне не хватало деталей .outerHTML. Теперь все работает так, как я ожидаю.
InnerHTML = externalHTML очень неэффективен и приводит к утечке памяти. Современный способ - сделать MyFrameContext.replaceChildren(MyFrame)
Спасибо Дэвид. У вас очень хорошая точка зрения. Я отредактировал код, и теперь все в порядке. Думаю, я сделал это именно так, потому что вопрос включает в себя «innerHTML»... И немного старых привычек.. =/
srcdoc = "${escapeHtml(request.responseText)}"создаст неверный HTML-код, если вrequest.responseTextесть двойные кавычки. У вас должна быть функцияescapeHtml(), заменяющая кавычки на".