- How to get element from an Iframe in JavaScript
- Общение между окнами
- Политика «Одинакового источника»
- Доступ к содержимому ифрейма
- Окна на поддоменах: document.domain
- Ифрейм: подождите документ
- Коллекция window.frames
- Атрибут ифрейма sandbox
- HTML DOM IFrame Object
- Access an IFrame Object
- Example
- Create an IFrame Object
- Example
- IFrame Object Properties
- Standard Properties and Events
- How TO — Get Iframe Elements
- Get Element in Iframe
- Example
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
How to get element from an Iframe in JavaScript
In this tutorial, we are going to learn about how to get the html elements from an Iframe in JavaScript.
Consider we have a following element in our index.html file.
iframe id="myIframe" src="/index.html" width="500px" height="500px">/iframe>
Getting the element in Iframe
To get the element in an iframe, first we need access the element inside the JavaScript using the document.getElementById() method by passing iframe id as an argument.
const iframe = document.getElementById("myIframe");
Now, it has and contentWindow property which returns the document object by using that we can access the elements from an Iframe.
const iWindow = iframe.contentWindow; const iDocument = iWindow.document; // accessing the element const element = iDocument.getElementsByTagName("p")[0]; element.style.color = "green";
In the example above, we have accessed the first
element from an Iframe and changed its color to green .
Similarly, we can access and modify other elements in the iframe using document object.
Note: If you want to access an iframe, it should be on the same domain otherewise you can’t access it because of security reasons (like XSS).
Общение между окнами
Политика «Одинакового источника» (Same Origin) ограничивает доступ окон и фреймов друг к другу.
Идея заключается в том, что если у пользователя открыто две страницы: john-smith.com и gmail.com , то у скрипта со страницы john-smith.com не будет возможности прочитать письма из gmail.com . Таким образом, задача политики «Одинакового источника» – защитить данные пользователя от возможной кражи.
Политика «Одинакового источника»
Два URL имеют «одинаковый источник» в том случае, если они имеют совпадающие протокол, домен и порт.
Эти URL имеют одинаковый источник:
- http://www.site.com (другой домен: www. важен)
- http://site.org (другой домен: .org важен)
- https://site.com (другой протокол: https )
- http://site.com:8080 (другой порт: 8080 )
Политика «Одинакового источника» говорит, что:
- если у нас есть ссылка на другой объект window , например, на всплывающее окно, созданное с помощью window.open или на window из и у этого окна тот же источник, то к нему будет полный доступ.
- в противном случае, если у него другой источник, мы не сможем обращаться к его переменным, объекту document и так далее. Единственное исключение – объект location : его можно изменять (таким образом перенаправляя пользователя). Но нельзя читать location (нельзя узнать, где находится пользователь, чтобы не было никаких утечек информации).
Доступ к содержимому ифрейма
Внутри находится по сути отдельное окно с собственными объектами document и window .
Мы можем обращаться к ним, используя свойства:
- iframe.contentWindow ссылка на объект window внутри .
- iframe.contentDocument – ссылка на объект document внутри , короткая запись для iframe.contentWindow.document .
Когда мы обращаемся к встроенному в ифрейм окну, браузер проверяет, имеет ли ифрейм тот же источник. Если это не так, тогда доступ будет запрещён (разрешена лишь запись в location , это исключение).
Для примера давайте попробуем чтение и запись в ифрейм с другим источником:
catch(e) < alert(e); // Security Error >// также мы не можем прочитать URL страницы в ифрейме try < // Нельзя читать из объекта Location let href = iframe.contentWindow.location.href; // ОШИБКА >catch(e) < alert(e); // Security Error >// . но можно писать в него (и загрузить что-то другое в ифрейм)! iframe.contentWindow.location = '/'; // OK iframe.onload = null; // уберём обработчик, чтобы не срабатывал после изменения location >;
Код выше выведет ошибку для любых операций, кроме:
- Получения ссылки на внутренний объект window из iframe.contentWindow
- Изменения location .
С другой стороны, если у ифрейма тот же источник, то с ним можно делать всё, что угодно:
;
Событие iframe.onload – по сути то же, что и iframe.contentWindow.onload . Оно сработает, когда встроенное окно полностью загрузится со всеми ресурсами.
…Но iframe.onload всегда доступно извне ифрейма, в то время как доступ к iframe.contentWindow.onload разрешён только из окна с тем же источником.
Окна на поддоменах: document.domain
По определению, если у двух URL разный домен, то у них разный источник.
Но если в окнах открыты страницы с поддоменов одного домена 2-го уровня, например john.site.com , peter.site.com и site.com (так что их общий домен site.com ), то можно заставить браузер игнорировать это отличие. Так что браузер сможет считать их пришедшими с одного источника при проверке возможности доступа друг к другу.
Для этого в каждом таком окне нужно запустить:
После этого они смогут взаимодействовать без ограничений. Ещё раз заметим, что это доступно только для страниц с одинаковым доменом второго уровня.
Ифрейм: подождите документ
Когда ифрейм – с того же источника, мы имеем доступ к документу в нём. Но есть подвох. Не связанный с кросс-доменными особенностями, но достаточно важный, чтобы о нём знать.
Когда ифрейм создан, в нём сразу есть документ. Но этот документ – другой, не тот, который в него будет загружен!
Так что если мы тут же сделаем что-то с этим документом, то наши изменения, скорее всего, пропадут.
;
Нам не следует работать с документом ещё не загруженного ифрейма, так как это не тот документ. Если мы поставим на него обработчики событий – они будут проигнорированы.
Как поймать момент, когда появится правильный документ?
Можно проверять через setInterval :
< let newDoc = iframe.contentDocument; if (newDoc == oldDoc) return; alert("New document is here!"); clearInterval(timer); // отключим setInterval, он нам больше не нужен >, 100);
Коллекция window.frames
Другой способ получить объект window из – забрать его из именованной коллекции window.frames :
- По номеру: window.frames[0] – объект window для первого фрейма в документе.
- По имени: window.frames.iframeName – объект window для фрейма со свойством name=»iframeName» .
Ифрейм может иметь другие ифреймы внутри. Таким образом, объекты window создают иерархию.
Навигация по ним выглядит так:
- window.frames – коллекция «дочерних» window (для вложенных фреймов).
- window.parent – ссылка на «родительский» (внешний) window .
- window.top – ссылка на самого верхнего родителя.
window.frames[0].parent === window; // true
Можно использовать свойство top , чтобы проверять, открыт ли текущий документ внутри ифрейма или нет:
Атрибут ифрейма sandbox
Атрибут sandbox позволяет наложить ограничения на действия внутри , чтобы предотвратить выполнение ненадёжного кода. Атрибут помещает ифрейм в «песочницу», отмечая его как имеющий другой источник и/или накладывая на него дополнительные ограничения.
Существует список «по умолчанию» ограничений, которые накладываются на . Их можно уменьшить, если указать в атрибуте список исключений (специальными ключевыми словами), которые не нужно применять, например: .
Другими словами, если у атрибута «sandbox» нет значения, то браузер применяет максимум ограничений, но через пробел можно указать те из них, которые мы не хотим применять.
allow-same-origin «sandbox» принудительно устанавливает «другой источник» для ифрейма. Другими словами, он заставляет браузер воспринимать iframe , как пришедший из другого источника, даже если src содержит тот же сайт. Со всеми сопутствующими ограничениями для скриптов. Эта опция отключает это ограничение. allow-top-navigation Позволяет ифрейму менять parent.location . allow-forms Позволяет отправлять формы из ифрейма. allow-scripts Позволяет запускать скрипты из ифрейма. allow-popups Позволяет открывать всплывающие окна из ифрейма с помощью window.open .
Пример ниже демонстрирует ифрейм, помещённый в песочницу со стандартным набором ограничений: . На странице содержится JavaScript и форма.
Обратите внимание, что ничего не работает. Таким образом, набор ограничений по умолчанию очень строгий:
HTML DOM IFrame Object
The IFrame object represents an HTML element.
Access an IFrame Object
You can access an element by using getElementById():
Example
Tip: You can also access an element by using the window.frames property.
Create an IFrame Object
You can create an element by using the document.createElement() method:
Example
IFrame Object Properties
Property | Description |
---|---|
align | Not supported in HTML5. Use style.cssFloat instead. Sets or returns the value of the align attribute in an iframe |
contentDocument | Returns the document object generated by an iframe |
contentWindow | Returns the window object generated by an iframe |
frameBorder | Not supported in HTML5. Use style.border instead. Sets or returns the value of the frameborder attribute in an iframe |
height | Sets or returns the value of the height attribute in an iframe |
longDesc | Not supported in HTML5. Sets or returns the value of the longdesc attribute in an iframe |
marginHeight | Not supported in HTML5. Use style.margin instead. Sets or returns the value of the marginheight attribute in an iframe |
marginWidth | Not supported in HTML5. Use style.margin instead. Sets or returns the value of the marginwidth attribute in an iframe |
name | Sets or returns the value of the name attribute in an iframe |
sandbox | Returns the value of the sandbox attribute in an iframe |
scrolling | Not supported in HTML5. Sets or returns the value of the scrolling attribute in an iframe |
seamless | Sets or returns whether an iframe should look like it is a part of the containing document (no borders or scrollbars), or not |
src | Sets or returns the value of the src attribute in an iframe |
srcdoc | Sets or returns the value of the srcdoc attribute in an iframe |
width | Sets or returns the value of the width attribute in an iframe |
Standard Properties and Events
The IFrame object also supports the standard properties and events.
How TO — Get Iframe Elements
Get an element from within an iframe with JavaScript.
Click the button to hide the first H1 element in the iframe (another document).
Get Element in Iframe
Get the first element inside the iframe and hide it:
Example
var iframe = document.getElementById(«myFrame»);
var elmnt = iframe.contentWindow.document.getElementsByTagName(«H1»)[0];
elmnt.style.display = «none»;
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.