jQuery对话框中的iframe为空

Question

我从域外获取了一些html页面，我想在jQuery对话框中显示它，但iframe中的内容是空的。我包含了一些国外的css样式soo html内容必须在iframe中。这是JS代码。

var text = '<label>TEST Text</label><img src="/somaimage.jpg">';
var helpWrapper = document.createElement('div');
helpWrapper.setAttribute('id', 'help_wrapper');
var helpModal = document.createElement('iframe');
helpModal.setAttribute('id', 'help_iframe');
helpWrapper.appendChild(helpModal);
document.body.appendChild(helpWrapper);
helpModal.contentDocument.getElementsByTagName("html")[0].setAttribute('style', 'display:block;');
var helpBase = helpModal.contentDocument.createElement("base");
helpBase.setAttribute("href", "https://www.outsidedomain.com");
helpModal.contentDocument.getElementsByTagName("head")[0].appendChild(helpBase);
var iframedoc = helpModal.contentDocument || helpModal.contentWindow.document;
iframedoc.body.innerHTML = text;
// 1. test
jQuery("#help_wrapper").dialog({
autoOpen: true,
modal: true
});
// 2. test
jQuery("#help_wrapper").html(helpModal);

我做错了什么？

Answer 1

好吧，经过一些实验，我得到了非常简单的解决方案。在第一步中，对话框必须准备好内容。之后内容应该插入里面。像这样的工作代码：

var $dialog = jQuery('<div />').dialog({
autoOpen: false,
modal: true,
closeText: "",
close: function (event, ui) {
if ($dialog) {
$dialog.dialog("close");
$dialog.remove();
}
}
});
var helpIframe = document.createElement('iframe');
helpIframe.setAttribute('id', 'help_iframe');
$dialog.append(helpIframe);
helpIframe.contentDocument.getElementsByTagName("html")[0].setAttribute('style', 'display:block;');
var helpBase = document.createElement("base");
helpBase.setAttribute("href", "https://www.outsidedomain.com");
helpIframe.contentDocument.getElementsByTagName("head")[0].appendChild(helpBase);
helpIframe.contentDocument.body.innerHTML = text;
$dialog.dialog('open');