typos
This commit is contained in:
parent
8e442cf8b2
commit
cd23e7d953
4 changed files with 27 additions and 11 deletions
|
@ -130,7 +130,7 @@
|
||||||
<ul>
|
<ul>
|
||||||
<li>`:host` выбирает элемент-хозяин, в котором, живёт Shadow DOM.
|
<li>`:host` выбирает элемент-хозяин, в котором, живёт Shadow DOM.
|
||||||
|
|
||||||
Хозяин :host выбирается в именно в контексте Shadow DOM.
|
Хозяин :host выбирается именно в контексте Shadow DOM.
|
||||||
|
|
||||||
То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM.
|
То есть, это доступ не к внешнему элементу, а, скорее, к корню текущего Shadow DOM.
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
|
|
||||||
Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом -- мы должны иметь возможность это сделать без "плясок с бубном".
|
Например, это нужно для подгрузки внешних частей документа (веб-компонент) снаружи. И желательно не иметь проблем с разными доменами: если уж мы действительно хотим подключить HTML с одного домена в страницу на другом -- мы должны иметь возможность это сделать без "плясок с бубном".
|
||||||
|
|
||||||
Иначе говоря, `<link rel="import">` -- это аналог `<script>`, но для подключения не только скриптов, а документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.
|
Иначе говоря, `<link rel="import">` -- это аналог `<script>`, но для подключения полноценных документов, с шаблонами, библиотеками, веб-компонентами и т.п. Всё станет понятнее, когда мы посмотрим детали.
|
||||||
|
|
||||||
## Пример вставки
|
## Пример вставки
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue