Как установить HTML-контент в iframe

У меня есть строка HTML

<html>
  <body>Hello world</body>
</html>

и я хочу установить его в iframe с JavaScript. Я пытаюсь установить HTML следующим образом:

contentWindow.document.body.innerHTML

или

contentDocument.body.innerHTML

или

document.body.innerHTML

но IE дает "Доступ запрещен". или "Объект не поддерживает это свойство или метод". или "Недопустимый конечный элемент для действия". ошибки.

Вот мой полный код:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="jquery_1.7.0.min.js"/>
    <script type="text/javascript">
      $(document).ready(function(){
        var htmlString = "<html><body>Hello world</body></html>";
        var myIFrame = document.getElementById('iframe1');
        // open needed line commentary
        //myIFrame.contentWindow.document.body.innerHTML = htmlString;
        //myIFrame.contentDocument.body.innerHTML = htmlString;
        //myIFrame.document.body.innerHTML = htmlString;
        //myIFrame.contentWindow.document.documentElement.innerHTML = htmlString;
      });
    </script>
  </head>
  <body>
    <p>This is iframe:
      <br>
      <iframe id="iframe1">
      <p>Your browser does not support iframes.</p>
      </iframe>
  </body>
</html>

Ответы

Ответ 1

Вы можете использовать:

document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");

Здесь jsFiddle, который работает во всех основных браузерах.

Обратите внимание, что вместо contentDocument.write вы должны использовать contentWindow.document.write: это заставляет его работать и в IE7.

Ответ 2

var htmlString="<body>Hello world</body>";
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+htmlString+"'";

С помощью html5 вы сможете использовать атрибут srcdoc.

Ответ 3

innerHTML немного сложнее, особенно в IE, где такие элементы, как thead, доступны только для чтения и вызывают много проблем.

На основе документации по msdn вы можете попробовать documentMode, которая предоставляет свойство innerHTML.

myIFrame = myIFrame.contentWindow ||
    myIFrame.contentDocument.document ||
    myIFrame.contentDocument;
myIFrame.document.open();
myIFrame.document.write('Your HTML Code');
myIFrame.document.close();

это может работать только в IE.

Ответ 4

Как насчет document.documentElement.innerHTML. Но знайте, что все на странице будет заменено даже на script, который делает это.

Для iframe это будет так: myIFrame.contentWindow.document.documentElement.innerHTML

Ответ 5

Дорогие все

Я надеюсь, что все могут помочь мне, я испытываю трудности и устал от создания слайдеров с более чем 200 слайдами в HTML и CSS.

Я хочу создавать слайды с 200 слайдов HTML & CSS

index.html

CSS/style.css

JS/scripts.js

IMG/

слайды /

+ 1.html & 1.css

+ 2.html & 2.css

+ 3.html & 3.css

......

+ 200.html & 200.css

Мой индекс

<!DOCTYPE HTML>
<html>
<head>
   <meta charset="utf-8">
   <link href="./css/style.css" rel="stylesheet" />
   <title>Slider Page Simulator</title>
</head>
 <style>
 
 </style>
<body>
 
 
 
 <div class="wrap">
   <div id="slides">
      <!-- load in slides -->
   </div>

 </div>  
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript"  src="./js/mysliders.js"></script>
</html>

Ответ 6

попробуйте:

$('iframe').load(function() {
    $(this).contents().find('body').append("Hello world");
});

обновление:

$(function(){
    $('iframe').load(function() {
        $(this).contents().find('body').append("Hello world");
    }); 
})