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

View file

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

View file

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

View file

@ -73,11 +73,11 @@
// не сработает (чтение)
alert( iframe.contentWindow.location.href );
} 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;
}