Как отобразить HTML-файл в JavaScript?

Question

Я пытаюсь отобразить HTML-файл в моем JS-код.

Это обычный 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>';

Это работает, но это делает его очень трудным для чтения... У вас есть идея, как я могу назвать весь мой код на данный момент, также многострочный?

Answer 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>

Answer 2

Вы могли бы использовать запрос XMLHttp, чтобы получить Html File Content, этот код асинхронен

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;
  });