Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Используйте JavaScript для доступа и управления домом в iframe.

Автор：Eve Cole Время обновления：2009-06-11 16:22:06

Многие люди всегда думали, что было бы здорово, если бы они могли управлять iframe по своему усмотрению. Таким образом, статические страницы имеют возможность реализовать унифицированный многостраничный макет, эквивалентный включению и требованию включения в фоновые динамические страницы php, jsp и asp.

С помощью Javascript мы можем динамически загружать содержимое html-страницы, на которую указывает атрибут src объекта iframe, как фон. Такая операция требует предоставления двух страниц: одна страница — это страница, на которой расположен iframe ( имя страницы: iPage.html ), а другая страница — это страница, на которую указывает атрибут src iframe ( имя страницы: srcPage.html ).

iPage.html, dom в <body>:

  1. < iframe идентификатор = " iId " имя = " iName " src = " srcPage.html " прокрутка = « нет » Frameborder = " 0 " > </iframe> srcPage.html

,<body>

  1. in dom : <h1> День сестры </h1>  
  2. <p> Завтракать утром, идти на свидание в полдень, петь караоке днем ​​и возиться с братом вечером </p>

Давайте обсудим, как работать с двумя вышеуказанными страницами с помощью JS под IE, а затем обсудите метод Firefox и, наконец, укажите совместимость с IE и Firefox. Метод работы браузера с объектом iframe.

1. Доступ к содержимому iframe и управление им в IE.

 

Всем известно, что iframe — это нестандартный тег HTML. Это тег с несколькими макетами, запускаемый браузером IE. Позже Mozilla также поддержала этот тег. (Сплетни, хе-хе)

1. IE получает его через document.frames["IframeName"]. Пример: мы выводим содержимое h1 в srcPage.html в iPage.html. JS выглядит следующим образом

  1. : alert ( document.frames [ " . iName " ] .document.getElementsByTagName ( ' h1 ' ) [ 0 ] .firstChild.data ) ; Вы обнаружите , что добавление

кода на страницу, похоже, не выводит желаемый материал. Почему? Я еще не разобрался с этим. Я просто обычно добавляю window.onload, и результат появится (Примечание: в это событие записан код JS). Может ли кто-нибудь, кто знает об этом, рассказать мне? Почему после изменения код выводится в IE, но document.frames не определен в Firefox.

  1. Сообщение об ошибке : window . () {  
  2.   alert ( document.frames [ " iName " ] . document.getElementsByTagName ( ' h1 ' ) [ 0 ] .firstChild.data ) } ) ; 2. т.е. другой способ
  3. получить его

— contentWindow, код:

  1. window onload = ( function . () {  
  2.   вар iObj = document.getElementById ( ' iId ' ) .​​​​
  3.   alert ( iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 . firstChild . data ) }
  4. ) ;

Этот метод прошел тесты ie6, ie7, firefox2.0 и firefox3.0. эй-эй. (После проверки в Интернете я обнаружил уязвимость переполнения буфера в Mozilla Firefox iframe.contentWindow.focus, которая создает риск атак путем внедрения скриптов.

Позже я услышал, что это можно предотвратить в фоновом режиме, и я почувствовал облегчение. Однако я все равно надеюсь, что новая версия Firefox сможет решить эту проблему.)

3. Измените содержимое заголовка h1 в srcPage.html

  1. , код : iObj . document . getElementsByTagName ( ' h1 ' ) [ 0 ] . часть ее дня ' ;

доступ к нему через contentWindow. Узлы такие же, как и раньше.

2. Доступ к содержимому iframe в Firefox.

Mozilla поддерживает стандарт W3C для доступа к объекту документа iframe через IFrameElmRef.contentDocument . С помощью этого стандарта вы можете написать на один документ меньше, код:

  1. var. iObj = document.getElementById ( ' iId ' ) . contentDocument ; alert (
  2. iObj.getElementsByTagName ( ' h1 ' ) [ 0 ] .innerHTML = ' Я хочу быть частью ее дня ' )
  3. ; alert ( iObj.getElementsByTagName ( ' p ) ' ) [ 0 ] . firstChild data ) ;

Теперь доступен метод, совместимый с этими двумя браузерами, который заключается в использовании метода contentWindow.

эй-эй! Могу ли я управлять iframe по своему усмотрению? Если вы по-прежнему чувствуете себя некомфортно, вы можете даже переписать содержимое iframe.

3. Перезапишите содержимое iframe.

С помощью designMode (переведя документ в редактируемый режим дизайна) и contentEditable (установив редактируемый контент) вы можете переписать содержимое iframe. Код:

  1. вар iObj = document.getElementById ( ' iId ' ) .iObj.designMode = ' On '
  2. ; iObj.contentEditable = true ; iObj .​​​
  3. ​​​​​​​​
  4. ​​​​​​​​
  5. ​​​​​​​
  6. head> ' ) ;
  7. iObj . document . writeln ( ' <style>body {background:#000;font-size:9pt; margin : 0px ;
  8. </style> ' ) ; iObj . ' </head><body> </body> </html> '
  9. ) ; iObj . close ( )

Информацию об этих двух объектах см. по адресу: http://msdn.microsoft.com/en-. us/library/ms533720(VS.85).aspx

Firebug проверяет производительность приведенного выше кода, как показано на рисунке.

Закомментируйте iObj.document.designMode = 'On';

iObj.document.contentEditable = true,

как показано:

Эффект не изменился, а эффективность использования времени почти в три раза выше, чем до аннотации. эй-эй. Эти два объекта относятся к методам записи, используемым некоторыми людьми в Интернете для перезаписи содержимого iframe. На самом деле нет необходимости использовать designMode и contentEditable, если нет других потребностей.

4. Адаптивная высота iframe

. С учетом вышеизложенных принципов реализовать это довольно просто, просто установите значение высоты iframe равным значению высоты документа внутри него. Код:

  1. окно . onload = ( функция () {  
  2. вар   iObj = document . getElementById ( ' iId ' ) ;
  3. iObj . height = iObj . document . documentElement ;​​​​
  4. ​​

​из-за этого технического термина в Интернете, эй, вонючий!

Справочные материалы:

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ webpagedesign/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
Связанные статьи