Запись элементов в дочерний iframe с использованием Javascript или jQuery

У меня есть что-то вроде этого:

<html>
  <body>
     <iframe id="someFrame"></iframe>
  </body>
</html>

И я хотел бы использовать jQuery для записи таких элементов, чтобы полный эквивалентный HTML был бы таким:

<html>
  <body>
    <iframe id="someFrame">
      <!-- inside the iframe content -->
      <!-- <html><body>  -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <!-- </body></html> -->
    </iframe>
  </body>
</html>

В качестве альтернативы, любой простой-Javascript будет в порядке.

Спасибо.

Изменить. После небольшого исследования, похоже, я ищу IE-эквивалент свойства contentDocument iframe. "contentDocument" - это стандарт W3C, который поддерживает FF, но IE этого не делает. (сюрприз)

Ответы

Ответ 1

Вы можете сделать то и другое, вам просто нужно настроить таргетинг по-разному:

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

Ответ 2

После некоторых исследований и подтверждающего ответа Майка, я нашел, что это решение:

  var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
  d.open(); d.close(); // must open and close document object to start using it!

  // now start doing normal jQuery:
  $("body", d).append("<div>A</div><div>B</div><div>C</div>");

Ответ 3

Я выхожу на конечность здесь и предлагаю, чтобы предлагаемые до сих пор ответы не были возможны.

Если в этом iframe действительно есть src= "somepage.html" (который вы должны были указать, а если нет, то в чем смысл использования iframe?), то я не думаю, что Jquery может напрямую манипулировать html через фреймы во всех браузерах. Основываясь на моем опыте такого рода вещей, содержащая страница не может напрямую вызывать функции или делать какие-либо контакты Javascript на странице iframe.

Ваша "somepage.html" (страница, загружаемая в iframe) должна выполнять две вещи:

  • Передайте какой-либо объект на содержащую страницу, которая может использоваться как мост
  • У вас есть функция для установки HTML по вашему желанию.

Так, например, somepage.html может выглядеть так:

<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
    var bridge={
        setHtml:function(htm) {
            document.body.innerHTML=htm;
        }
    }

    $(function() { parent.setBridge(bridge); });

//--></script>
</head>
<body></body>
</html>

и содержащая страница может выглядеть так:

<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
    bridge=br;
    bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
    }
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>

Это может показаться немного запутанным, но оно может быть адаптировано в нескольких направлениях и должно работать как минимум в IE, FF, Chrome и, возможно, в Safari и Opera...

Ответ 4

Существует два надежных метода доступа к элементу document внутри iframe:

1. Свойство window.frames:

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

Демо


2. Свойство contentDocument:

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

Демо

Ответ 5

Я нашел, что это совместимо с кросс-браузером... небольшое перекрестье предыдущих ответов и немного проб и ошибок.:)

Я использую это для загрузки отчета или, если возникает ошибка (сообщение), он отображается в iFrame. У большинства пользователей, вероятно, будет скрытый iFrame, я использую его как многофункциональный.

Дело в том, что я должен очищать содержимое iFrame каждый раз, когда я нажимаю кнопку загрузки отчета - пользователь может изменять параметры, и, случается, нет результатов, которые затем отображаются в iFrame в качестве сообщения. Если есть результаты, iFrame остается пустым - потому что код ниже очистил его, а метод window.open(...) генерирует документ Content-Disposition: attachment;filename=....

var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''); // clear iFrame contents <- I'm using this...
$body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

У меня нет браузера, поддерживающего contentDocument, но я закодировал его таким образом, чтобы оставить его. Может быть, у кого-то есть более старые браузеры и может опубликовать подтверждение совместимости/проблемы?