如何在 javascript 中显示 html 文件？答案

【问题标题】：How to display an html file in javascript?如何在 javascript 中显示 html 文件？
【发布时间】：2019-06-30 03:50:03
【问题描述】：

我正在尝试在我的 js 代码中显示一个 html 文件。

这是一个我想看的普通html文件。我已经为此创建了一个 IFRAME，但不知何故我无法更进一步......

这是我的代码片段：

var controlAddIn = document.getElementById('controlAddIn').src = 'index.html';

所以我要调用的文件是“index.html”。但它不起作用。

如果我这样称呼它：

var controlAddIn = document.getElementById('controlAddIn').srcdoc = '<div><meta charset="UFT-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>';

它正在工作，但它使阅读变得非常困难...... 你有什么想法吗，我现在如何调用我的整个代码，也是多行的？

【问题讨论】：

index.html 是否与包含 iframe 的 HTML 文件位于同一目录中？
你的代码对我有用：jsfiddle.net/barmar/4gk9wL6b/2
JavaScript 控制台有错误吗？
@Barmar 是的，它和不，没有错误消息。
你在 iframe 中看到了什么，而不是 index.html 的内容？

标签： javascript html multiline

【解决方案1】：

如果你这样调用，这两个文件应该是相同的路径否则你已经调用了正确的路径

var controlAddIn = document.getElementById('controlAddIn').src = 'index.html';

将此文件保存在 index.html 路径中并在浏览器中打开

<script type="text/javascript">

function newSite() {


    document.getElementById('myIframe').src = "index.html"
}    
</script>

<input type="button" value="Change site" onClick="newSite()" />
<iframe id="myIframe" src="http://google.com/" ></iframe>

【讨论】：

你和他的代码有什么不同？他在评论中说他们在同一个目录中。
我做了这个例子，如果文件在同一个路径中它会工作。
答案不应用作示例。他们应该解释问题是什么以及如何解决它。

【解决方案2】：

你可以使用 XMLHttp 请求来异步获取 Html 文件内容

function httpGet(theUrl,callback)
   {
       var xmlHttp = new XMLHttpRequest();
       xmlHttp.open( "GET", theUrl, true ); // false for synchronous request
       xmlHttp.send( null );
       xmlHttp.onreadystatechange = function() {
          callback(xmlHttp.responseText);
       };
    }
  var controlAddIn;
  httpGet("index.html",function(content){
     controlAddIn = document.getElementById('controlAddIn').src =content;
  });

【讨论】：

我认为您的意思是 srcdoc 而不是 src。另外，不推荐使用同步 XMLHttpRequest，您应该编写异步代码。