javascript - mainDiv.innerHTML = 外部文件

Question

我有一个code.js文件，其中包含以下内容：

DivDialogHTML = function(){
  var mainDiv = document.createElement("div");
  mainDiv.id = "optin_settings_dialog";
  mainDiv.className = "OptinDialog";
  mainDiv.innerHTML = "<div>Text</div>";
}

加载弹出窗口的代码（不知道是否都是代码，但要明白）：

DivDialogOverlayHTML = function(){
  var mainDiv = document.createElement("div");
  mainDiv.id = "optin_settings_overlay_dialog";
  mainDiv.className = "OptinDialog";
  return mainDiv;
}


renderOptinWindow = function(){
  var pageHead = document.getElementsByTagName("head")[0];
  var pageBody = document.getElementsByTagName("body")[0];
  if( pageHead && pageBody ){
    pageBody.appendChild( this.getDivDialogHTML() );
  }
}

而不是使用mainDiv.innerHTML = '<div>Text</div>'Id likemainDiv.innerHTML打开另一个文件 ( Dialog.html)。
我怎么做？

Answer 1

with Ajax. But why not using jQuery?

$('.selector').load(url);

In your case you have to insert jQuery first like this in your

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

And than take your existing function and change it like this

DivDialogHTML = function(){
    var $mainDiv = jQuery("div");
    $mainDiv.attr('id', "optin_settings_dialog");
    $mainDiv.addClass("OptinDialog");
    /* $mainDiv.html("<div>Text</div>"); */
    $mainDiv.load('Dialog.html');
}

Answer 2

如果你不想使用jQuery，你可以使用iframe

HTML

<iframe id="optin_settings_dialog"></iframe>

Javascript

document.getElementById("optin_settings_dialog").src="Dialog.html";

Answer 3

你的意思是另一个窗口？如果是这样，请看看window.open

窗口打开

创建新窗口后，放置其内容并显示