Записывать элементы в дочерний iframe, используя Javascript или jQuery - PullRequest
Новая
       15

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

45 голосов
/ 15 июня 2009

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

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

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

<html>
  <body>
    <iframe id="someFrame">
      <!-- inside the iframe's 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 - нет. (неожиданный сюрприз)

Ответы [ 5 ]

82 голосов
/ 16 июня 2009

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

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();
35 голосов
/ 16 июня 2009

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

  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>");
9 голосов
/ 13 января 2014

Существует два надежных метода доступа к элементу 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;

Демо

7 голосов
/ 16 июня 2009

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

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

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

  1. Передача некоторого объекта на содержащую его страницу, которую можно использовать как мост.
  2. Есть функция для установки 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 ...

0 голосов
/ 14 апреля 2014

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

Я использую это для загрузки отчета, или, если возникает ошибка (сообщение), она отображается в 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, но я закодировал его таким образом, поэтому я оставляю его. Может быть, кто-то имеет более старые браузеры и может публиковать подтверждение совместимости / проблемы?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...