This commit is contained in:
Ilya Kantor 2015-06-07 21:48:08 +03:00
parent 8e442cf8b2
commit cd23e7d953
4 changed files with 27 additions and 11 deletions

View file

@ -130,7 +130,7 @@
<ul> <ul>
<li>`:host` выбирает элемент-хозяин, в котором, живёт Shadow DOM. <li>`:host` выбирает элемент-хозяин, в котором, живёт Shadow DOM.
Хозяин :host выбирается в именно в контексте Shadow DOM. Хозяин :host выбирается именно в контексте Shadow DOM.
То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM. То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM.

View file

@ -20,7 +20,7 @@
Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом -- мы должны иметь возможность это сделать без "плясок с бубном". Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом -- мы должны иметь возможность это сделать без "плясок с бубном".
Иначе говоря, `<link rel="import">` -- это аналог `<script>`, но для подключения не только скриптов, а документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали. Иначе говоря, `<link rel="import">` -- это аналог `<script>`, но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.
## Пример вставки ## Пример вставки

View file

@ -20,19 +20,35 @@
<script> <script>
var iframe = document.getElementsByTagName('iframe')[0]; var iframe = document.getElementsByTagName('iframe')[0];
*!*
var iframeDoc = iframe.contentWindow.document; var iframeDoc = iframe.contentWindow.document;
*/!*
if (iframeDoc.readyState == 'complete') {
iframeDoc.body.style.backgroundColor = 'green'; iframeDoc.body.style.backgroundColor = 'green';
}
iframe.onload = function() {
var iframeDoc2 = iframe.contentWindow.document;
iframeDoc2.body.style.backgroundColor = 'orange';
}
</script> </script>
``` ```
[smart header="src='javascript:...'"] [smart header="src='javascript:\"текст\"'"]
Атрибут `src` может использовать протокол `javascript:...`. При этом код выполняется и его результат будет содержимым ифрейма. Этот способ описан в стандарте и поддерживается всеми браузерами. Атрибут `src` может использовать протокол `javascript`, как указано выше: `src="javascript:код"`. При этом код выполняется и его результат будет содержимым ифрейма. Этот способ описан в стандарте и поддерживается всеми браузерами.
Атрибут `src` является обязательным, и его отсутствие может привести к проблемам, вплоть до игнорирования ифрейма браузером. Чтобы ничего не загружать в ифрейм, можно указать пустую строку: `src="javascript:''"`. Атрибут `src` является обязательным, и его отсутствие может привести к проблемам, вплоть до игнорирования ифрейма браузером. Чтобы ничего не загружать в ифрейм, можно указать пустую строку: `src="javascript:''"` или специальную страницу: `src="about:blank"`.
[/smart] [/smart]
В некоторых браузерах (Chrome) пример выше покажет `iframe` зелёным. А в некоторых (Firefox) -- оранжевым.
Дело в том, что, когда `iframe` только создан, документ в нём обычно ещё не загружен.
При обычных значениях `iframe src="..."`, которые указывают на HTML-страницу (даже если она уже в кеше), это всегда так. Документ, который в `iframe` на момент срабатывания скрипта `iframeDoc` -- временный, он будет заменён на новый очень скоро. И работать надо уже с новым документом `iframeDoc2` -- например, по событию `iframe.onload`.
В случае с `javascript`-протоколом, по идее, ифрейм уже загружен, и тогда `onload` у него уже не будет. Но здесь мнения браузеров расходятся, некоторые (Firefox) всё равно "подгрузят" документ позже. Поэтому факт "готовности" документа в скрипте проверяется через `iframeDoc.readyState`.
Ещё раз заметим, что при обычных URL в качестве `src` нужно работать не с начальным документом, а с тем, который появится позже.
## Кросс-доменность: ограничение доступа к окну ## Кросс-доменность: ограничение доступа к окну
Элемент `<iframe>` является "двуличным". С одной стороны, это обычный узел DOM, с другой -- внутри находится окно, которое может иметь совершенно другой URL, содержать независимый документ из другого источника. Элемент `<iframe>` является "двуличным". С одной стороны, это обычный узел DOM, с другой -- внутри находится окно, которое может иметь совершенно другой URL, содержать независимый документ из другого источника.
@ -148,7 +164,7 @@ if (window == top) {
Атрибут `sandbox` может содержать через пробел список ограничений, которые не нужны: Атрибут `sandbox` может содержать через пробел список ограничений, которые не нужны:
<dl> <dl>
<dt>allow-same-origin</dt> <dt>allow-same-origin</dt>
<dd>Браузер может не считать документ в ифрейме пришедшим с другого же домена. Если ифрейм *и так* с другого домена, то ничего не меняется.</dd> <dd>Браузер будет считать документ в ифрейме пришедшим с другого домена и накладывать соответствущие ограничения на работу с ним. Если ифрейм и так с другого домена, то ничего не меняется.</dd>
<dt>allow-top-navigation</dt> <dt>allow-top-navigation</dt>
<dd>Разрешает ифрейму менять `parent.location`.</dd> <dd>Разрешает ифрейму менять `parent.location`.</dd>
<dt>allow-forms</dt> <dt>allow-forms</dt>

View file

@ -73,11 +73,11 @@
// не сработает (чтение) // не сработает (чтение)
alert( iframe.contentWindow.location.href ); alert( iframe.contentWindow.location.href );
} catch (e) { } catch (e) {
alert( "Ошибка: " + e.message ); alert( "Ошибка при чтении: " + e.message );
} }
// сработает (запись) // сработает (запись)
iframe.contentWindow.location.href = 'http://wikipedia.org'; iframe.contentWindow.location.href = 'https://wikipedia.org';
iframe.onload = null; iframe.onload = null;
} }