diff options
Diffstat (limited to 'files/ru/conflicting/web/api')
22 files changed, 2741 insertions, 0 deletions
diff --git a/files/ru/conflicting/web/api/canvas_api/a_basic_ray-caster/index.html b/files/ru/conflicting/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..23b14adb7c --- /dev/null +++ b/files/ru/conflicting/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,50 @@ +--- +title: A Basic RayCaster +slug: A_Basic_RayCaster +tags: + - Canvas_examples +--- +<p> </p> + +<p><img alt="The raycaster in action"></p> + +<p><strong><a class="external" href="http://developer.mozilla.org/samples/raycaster/RayCaster.html">View the live demo.</a></strong></p> + +<h3 id="Why.3F" name="Why.3F">Why?</h3> + +<p>After realizing, to my delight, that the nifty <code><canvas></code> element I'd been <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">reading about</a> was not only soon to be supported in Firefox, but was<em>already</em> supported in the current version of Safari, I had to try a little experiment.</p> + +<p>The canvas <a href="ru/Drawing_Graphics_with_Canvas">overview</a> and <a href="ru/Canvas_tutorial">tutorial</a> I found here at MDC are great, but nobody had written about animation yet, so I thought I'd try a port of a basic raycaster I'd worked on a while ago, and see what sort of performance we can expect from a javascript controlled pixel buffer.</p> + +<h3 id="How.3F" name="How.3F">How?</h3> + +<p>The basic idea is to use <code><a href="ru/DOM/window.setInterval">setInterval</a></code> at some arbitrary delay that corresponds to a desired frame rate. After every interval an update function will repaint the canvas showing the current view. I know I could have started with a simpler example, but I'm sure the canvas tutorial will <a href="ru/Canvas_tutorial/Basic_animations">get to that</a>, and I wanted to see if I could do this.</p> + +<p>So every update, the raycaster looks to see if you've pressed any keys lately, to conserve calculations by not casting if you're idle. If you have, then the canvas is cleared, the ground and sky are drawn, the camera position and / or orientation are updated and the rays are cast out. As the rays intersect walls, then they render a vertical sliver of canvas in the color of the wall they've hit, blended with a darker version of the color according to the distance to the wall. The height of the sliver is also modulated by the distance from the camera to the wall, and is drawn centered over the horizon line.</p> + +<p>The code I ended up with is a regurgitated amalgam of the raycaster chapters from an old André LaMothe<em>Tricks of the Game Programming Gurus</em> book (<small>ISBN: 0672305070</small>), and a <a class="external" href="http://www.shinelife.co.uk/java-maze/">java raycaster</a> I found online, filtered through my compulsion to rename everything so it makes sense to me, and all the tinkering that had to be done to make things work well.</p> + +<h3 id="Results" name="Results">Results</h3> + +<p>The canvas in Safari 2.0.1 performed suprisingly well. With the blockiness factor cranked up to render slivers 8 pixels wide, I can run a 320 x 240 window at 24 fps on my Apple mini. Firefox 1.5 Beta 1 is even faster; I can run 320 x 240 at 24 fps with 4 pixel slivers. Not exactly a new member of the ID software family, but pretty decent considering it's a fully interpreted environment, and I didn't have to worry about memory allocation or video modes or coding inner routines in assembler or anything. The code does attempt to be very efficient, using array look-ups of pre-computed values, but I'm no optimization guru, so things could probably be written faster.</p> + +<p>Also, it leaves a lot to be desired in terms of trying to be any sort of game engine—there are no wall textures, no sprites, no doors, not even any teleporters to get to another level. But I'm pretty confident all those things could be added given enough time. The canvas API supports pixel copying of images, so textures seem feasible. I'll leave that for another article, probably from another person. =)</p> + +<h3 id="The_RayCaster" name="The_RayCaster">The RayCaster</h3> + +<p>The nice people here have manually copied my files up so you can take a <a class="external" href="http://developer.mozilla.org/samples/raycaster/RayCaster.html">look</a>, and for your hacking enjoyment I've posted the individual file contents as code listings (see below).</p> + +<p>So there you are, fire up Safari 1.3+ or Firefox 1.5+ or some other browser that supports the <code><canvas></code> element and enjoy!<br> + <br> + <small><a href="ru/A_Basic_RayCaster/input.js">input.js</a> | <a href="ru/A_Basic_RayCaster/Level.js">Level.js</a> | <a href="ru/A_Basic_RayCaster/Player.js">Player.js</a> | <a href="ru/A_Basic_RayCaster/RayCaster.html">RayCaster.html</a> | <a href="ru/A_Basic_RayCaster/RayCaster.js">RayCaster.js</a> | <a href="ru/A_Basic_RayCaster/trace.css">trace.css</a> | <a href="ru/A_Basic_RayCaster/trace.js">trace.js</a> </small></p> + +<h3 id="See_Also" name="See_Also">See Also</h3> + +<ul> + <li><a href="ru/Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li> + <li><a href="ru/Canvas_tutorial">Canvas tutorial</a></li> + <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">Apple Canvas Documentation</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#dynamic">WhatWG Canvas Specification</a></li> +</ul> + +<p>{{ languages( { "fr": "fr/Un_raycaster_basique", "ja": "ja/A_Basic_RayCaster", "pl": "pl/Prosty_RayCaster" } ) }}</p> diff --git a/files/ru/conflicting/web/api/crypto/getrandomvalues/index.html b/files/ru/conflicting/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..d56506a90a --- /dev/null +++ b/files/ru/conflicting/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,111 @@ +--- +title: RandomSource +slug: Web/API/RandomSource +tags: + - API + - Interface + - NeedsTranslation + - RandomSource + - Reference + - TopicStub + - Web Crypto API +translation_of: Web/API/Crypto/getRandomValues +translation_of_original: Web/API/RandomSource +--- +<p>{{APIRef("Web Crypto API")}}</p> + +<p><strong><code>RandomSource</code></strong> представляет собой источник криптографически безопасных случайных чисел. Он доступен через {{domxref("Crypto")}} объект глобального объекта: {{domxref("Window.crypto")}} на веб страницах, {{domxref("WorkerGlobalScope.crypto")}} для воркеров.</p> + +<p><code>RandomSource</code> не является интерфейсом и объект этого типа не может быть создан.</p> + +<h2 id="Свойства">Свойства</h2> + +<p><em><code>RandomSource</code> не объявляет и не наследует никаких свойств.</em></p> + +<dl> +</dl> + +<h2 id="Методы">Методы</h2> + +<dl> + <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> + <dd>Наполняет {{ domxref("ArrayBufferView") }} криптографически безопасными случайными числовыми значениями.</dd> +</dl> + +<h2 id="Specification" name="Specification">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Коммент</th> + </tr> + <tr> + <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> + <td>{{Spec2('Web Crypto API')}}</td> + <td>Изначальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>11.0 {{ webkitbug("22049") }}</td> + <td>{{CompatGeckoDesktop(21)}} [1]</td> + <td>11.0</td> + <td>15.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Возможность</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatNo() }}</td> + <td>23</td> + <td>{{CompatGeckoMobile(21)}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li> + <li>{{jsxref("Math.random")}}, не криптографический источник случайных чисел.</li> +</ul> diff --git a/files/ru/conflicting/web/api/document_object_model/index.html b/files/ru/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..3acab80018 --- /dev/null +++ b/files/ru/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,62 @@ +--- +title: DOM +slug: DOM +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +<div> + <p><b>Объектная модель документа</b> (<b>DOM</b>) — это API для <a href="/ru/docs/HTML">HTML</a> и <a href="/ru/docs/XML">XML</a> документов. Она предоставляет структуру документа, что позволяет изменять его содержимое и внешний вид. По сути, она связывает веб-страницы со скриптами или языками программирования.</p> +</div> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F" name=".D0.94.D0.BE.D0.BA.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D0.B0.D1.86.D0.B8.D1.8F">Документация</h2> + <dl> + <dt> + <a href="/ru/docs/%d0%a1%d0%bf%d1%80%d0%b0%d0%b2%d0%be%d1%87%d0%bd%d0%b0%d1%8f_%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f_%d0%bf%d0%be_Gecko_DOM">Справочная информация по Gecko DOM</a></dt> + <dd> + Объектная модель документа движка Gecko.</dd> + <dt> + <a href="/ru/docs/%d0%9e%d0%b1_%d0%be%d0%b1%d1%8a%d0%b5%d0%ba%d1%82%d0%bd%d0%be%d0%b9_%d0%bc%d0%be%d0%b4%d0%b5%d0%bb%d0%b8_%d0%b4%d0%be%d0%ba%d1%83%d0%bc%d0%b5%d0%bd%d1%82%d0%b0">Об объектной модели документа</a></dt> + <dd> + Краткое введение в DOM.</dd> + <dt> + <a href="/ru/docs/%d0%94%d0%b8%d0%bd%d0%b0%d0%bc%d0%b8%d1%87%d0%b5%d1%81%d0%ba%d0%b8_%d0%b8%d0%b7%d0%bc%d0%b5%d0%bd%d1%8f%d0%b5%d0%bc%d1%8b%d0%b9_%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d0%be%d0%b2%d0%b0%d1%82%d0%b5%d0%bb%d1%8c%d1%81%d0%ba%d0%b8%d0%b9_%d0%b8%d0%bd%d1%82%d0%b5%d1%80%d1%84%d0%b5%d0%b9%d1%81_%d0%bd%d0%b0_XUL">Динамически изменяемый пользовательский интерфейс на XUL</a></dt> + <dd> + Основы управления XUL UI с помощью методов DOM.</dd> + <dt> + <a href="/ru/docs/DOM_%d0%b8_JavaScript">DOM и JavaScript</a></dt> + <dd> + Что такое DOM? Что такое JavaScript? Как мне использовать их совместно на моей веб-странице? Этот документ отвечает на эти и другие вопросы.</dd> + <dt> + <a class="external" href="http://www.mozilla.org/docs/dom/">Объектная модель документа Mozilla</a></dt> + <dd> + Более старая документация по DOM, размещенная на mozilla.org.</dd> + </dl> + <p><span class="alllinks"><a href="/ru/docs/tag/DOM">Посмотреть все...</a></span></p> + </td> + <td> + <h2 class="Community" id=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE" name=".D0.A1.D0.BE.D0.BE.D0.B1.D1.89.D0.B5.D1.81.D1.82.D0.B2.D0.BE">Сообщество</h2> + <ul> + <li>Форумы Mozilla... {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> + </ul> + <h2 class="Tools" id=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B" name=".D0.98.D0.BD.D1.81.D1.82.D1.80.D1.83.D0.BC.D0.B5.D0.BD.D1.82.D1.8B">Инструменты</h2> + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> + <li><a href="/ru/docs/DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> + <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> + </ul> + <p><span class="alllinks"><a href="/ru/docs/tag/DOM:Tools">Посмотреть все...</a></span></p> + <h2 class="Related_Topics" id=".D0.A1.D1.81.D1.8B.D0.BB.D0.BA.D0.B8_.D0.BF.D0.BE_.D1.82.D0.B5.D0.BC.D0.B5" name=".D0.A1.D1.81.D1.8B.D0.BB.D0.BA.D0.B8_.D0.BF.D0.BE_.D1.82.D0.B5.D0.BC.D0.B5">Ссылки по теме</h2> + <ul> + <li><a href="/ru/docs/AJAX">AJAX</a>, <a href="/ru/docs/CSS">CSS</a>, <a href="/ru/docs/DHTML">DHTML</a>, <a href="/ru/docs/JavaScript">JavaScript</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html b/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html new file mode 100644 index 0000000000..ab6a5c0435 --- /dev/null +++ b/files/ru/conflicting/web/api/document_object_model_5521049528397035462607d58539e0cc/index.html @@ -0,0 +1,25 @@ +--- +title: Об объектной модели документа +slug: Об_объектной_модели_документа +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +<h3 id=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_DOM.3F" name=".D0.A7.D1.82.D0.BE_.D1.82.D0.B0.D0.BA.D0.BE.D0.B5_DOM.3F">Что такое DOM?</h3> + +<p><a href="ru/DOM">Document Object Model</a> — это API для <a href="ru/HTML">HTML</a> и <a href="ru/XML">XML</a> документов. Она предоставляет структурное представление документа, что позволяет изменять его содержимое и внешний вид. По сути, она связывает веб-страницы со скриптами или языками программирования.</p> + +<p>Все свойства, методы и события, доступные веб-разработчику для манипулирования и создания веб-страниц организованы в <a href="ru/%d0%a1%d0%bf%d1%80%d0%b0%d0%b2%d0%be%d1%87%d0%bd%d0%b0%d1%8f_%d0%b8%d0%bd%d1%84%d0%be%d1%80%d0%bc%d0%b0%d1%86%d0%b8%d1%8f_%d0%bf%d0%be_Gecko_DOM">объекты</a> (например, объект document, который представляет сам документ, объект table, который представляет элементы HTML-таблицы, и т.д.). Эти объекты доступны через скриптовые языки в большинстве современных браузеров.</p> + +<p>В основном DOM используется вместе с <a href="ru/JavaScript">JavaScript</a>. То есть код пишется на JavaScript, но он использует DOM для доступа к веб-странице и ее элементам. Тем не менее, DOM создавался, чтобы независимо от конкретных языков программирования имелась возможность доступа к структурному представлению документа через один API. Несмотря на то, что на этом сайте мы заострим внимание на JavaScript, реализации DOM могут быть созданы для <a class="external" href="http://www.w3.org/DOM/Bindings">любого языка</a>.</p> + +<p><a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> установил <a class="external" href="http://www.w3.org/DOM/">стандарт для DOM</a>, называемый W3C DOM. Сейчас, когда большинство браузеров поддерживают этот стандарт, появилась возможность создавать мощные кросс-браузерные приложения.</p> + +<h3 id=".D0.9F.D0.BE.D1.87.D0.B5.D0.BC.D1.83_.D1.82.D0.B0.D0.BA_.D0.B2.D0.B0.D0.B6.D0.BD.D0.B0_.D0.BF.D0.BE.D0.B4.D0.B4.D0.B5.D1.80.D0.B6.D0.BA.D0.B0_DOM_.D0.B2_Mozilla.3F" name=".D0.9F.D0.BE.D1.87.D0.B5.D0.BC.D1.83_.D1.82.D0.B0.D0.BA_.D0.B2.D0.B0.D0.B6.D0.BD.D0.B0_.D0.BF.D0.BE.D0.B4.D0.B4.D0.B5.D1.80.D0.B6.D0.BA.D0.B0_DOM_.D0.B2_Mozilla.3F">Почему так важна поддержка DOM в Mozilla?</h3> + +<p>"Динамический HTML" (<a href="ru/DHTML">DHTML</a>) — это термин, под которым понимают совокупность HTML, CSS и скриптов, которые позволяют создавать анимированные веб-страницы. Поскольку Mozilla позиционирует свой продукт как "платформу для веб-приложений", поддержка DOM является очень важной и необходимой, чтобы Mozilla была достойной альтернативой другим браузерам.</p> + +<p>Еще более важным фактом является то, что пользовательский интерфейс в Mozilla (а также в Firefox и Thunderbird) построен на XUL — языке разметки пользовательского интерфейса. Так что Mozilla использует DOM для <a href="ru/Dynamically_modifying_XUL-based_user_interface">изменения своего интерфейса</a>.</p> + +<p>{{ languages( { "es": "es/Acerca_del_Modelo_de_Objetos_del_Documento", "fr": "fr/\u00c0_propos_du_Document_Object_Model", "ja": "ja/About_the_Document_Object_Model", "ko": "ko/About_the_Document_Object_Model", "pl": "pl/O_modelu_obiektowym_dokumentu", "zh-cn": "cn/\u5173\u4e8e\u6587\u6863\u5bf9\u8c61\u6a21\u578b" } ) }}</p> diff --git a/files/ru/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html b/files/ru/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html new file mode 100644 index 0000000000..1671813170 --- /dev/null +++ b/files/ru/conflicting/web/api/document_object_model_dd00a71ceceac547ab464128db6bd8ef/index.html @@ -0,0 +1,38 @@ +--- +title: DOM developer guide +slug: Web/Guide/API/DOM +tags: + - API + - DOM + - Guide + - NeedsContent + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +<p>{{draft}}</p> + +<p>Объектная модель документа - это API для документов HTML и XML. Она обеспечивает структурное представление документа, позволяя разработчику изменять его содержание и визуальное представление. По сути, она соединяет веб-страницы со скриптами или языками программирования.</p> + +<p>Все свойства, методы и события, доступные веб-разработчику для манипулирования и создания веб-страниц, организованы в объекты (например, объект документа, представляющий сам документ, объект таблицы, представляющий элемент таблицы HTML и т. Д.) , Эти объекты доступны через скриптовые языки в самых последних веб-браузерах.</p> + +<p>DOM чаще всего используется в сочетании с JavaScript. Тем не менее, DOM был разработан, чтобы быть независимым от какого-либо конкретного языка программирования, делая структурное представление документа доступным из единого, согласованного API. Хотя мы,на этом сайте, сосредоточены на JavaScript реализации DOM могут быть построены для любого языка.</p> + +<p>Консорциум World Wide Web устанавливает стандарт для DOM, называемый W3C DOM. Теперь, когда наиболее важные браузеры правильно его реализуют, следует включить мощные кросс-браузерные приложения.</p> + +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Почему так важен DOM?</h2> + +<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. также <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>).</p> + +<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, используя DOM для <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">управления собственным пользовательским интерфейсом UI</a>.</p> + +<h2 id="More_about_the_DOM">More about the DOM</h2> + +<p>{{LandingPageListSubpages}}</p> + + + +<p>«Динамический HTML» (DHTML) - это термин, используемый некоторыми поставщиками для описания комбинации HTML, таблиц стилей и сценариев, позволяющих анимировать документы. Рабочая группа W3C DOM усердно работает над тем, чтобы согласовать совместимые и не зависящие от языка решения (см. Также FAQ по W3C).</p> + +<p>Поскольку Mozilla претендует на звание «Платформа веб-приложений», поддержка DOM является одной из наиболее востребованных функций и необходимой, если Mozilla хочет стать жизнеспособной альтернативой другим браузерам. Пользовательский интерфейс Mozilla (также Firefox и Thunderbird) построен с использованием XUL, используя DOM для управления собственным пользовательским интерфейсом.</p> diff --git a/files/ru/conflicting/web/api/element/index.html b/files/ru/conflicting/web/api/element/index.html new file mode 100644 index 0000000000..af6ec4765c --- /dev/null +++ b/files/ru/conflicting/web/api/element/index.html @@ -0,0 +1,45 @@ +--- +title: Slotable +slug: Web/API/Slotable +tags: + - миксины +translation_of: Web/API/Slottable +translation_of_original: Web/API/Slotable +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p>Миксин <code>Slotable</code> определяет возможности, которые позволяют нодам становиться контентом элемента {{htmlelement("slot")}} — следующие возможности включены в {{domxref("Element")}} и {{domxref("Text")}}.</p> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt>{{domxref("Slotable.assignedSlot")}} {{readonlyInline}}</dt> + <dd>Возвращает {{htmlelement("slot")}}, в который вставлена нода.</dd> +</dl> + +<h2 id="Методы">Методы</h2> + +<p>Нет.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарии</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#slotable','Slotable')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Первое определение.</td> + </tr> + </tbody> +</table> + +<h2 id="Поддержка_браузерами">Поддержка браузерами</h2> + + + +<p>{{Compat("api.Slotable")}}</p> diff --git a/files/ru/conflicting/web/api/eventtarget/addeventlistener/index.html b/files/ru/conflicting/web/api/eventtarget/addeventlistener/index.html new file mode 100644 index 0000000000..a428f9724c --- /dev/null +++ b/files/ru/conflicting/web/api/eventtarget/addeventlistener/index.html @@ -0,0 +1,9 @@ +--- +title: EventTarget.attachEvent() +slug: Web/API/EventTarget/attachEvent +tags: + - Junk +translation_of: Web/API/EventTarget/addEventListener +translation_of_original: Web/API/EventTarget/attachEvent +--- +<p>{{DOMxRef("EventTarget.addEventListener","EventTarget.addEventListener()")}}</p> diff --git a/files/ru/conflicting/web/api/eventtarget/removeeventlistener/index.html b/files/ru/conflicting/web/api/eventtarget/removeeventlistener/index.html new file mode 100644 index 0000000000..9a62ecb63c --- /dev/null +++ b/files/ru/conflicting/web/api/eventtarget/removeeventlistener/index.html @@ -0,0 +1,92 @@ +--- +title: EventTarget.detachEvent() +slug: Web/API/EventTarget/detachEvent +translation_of: Web/API/EventTarget/removeEventListener +translation_of_original: Web/API/EventTarget/detachEvent +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>{{ Non-standard_header() }}</p> + +<h2 id="Кратко">Кратко</h2> + +<p>Это проприетарная альтернатива методу {{domxref("EventTarget.removeEventListener()")}} в Microsoft Internet Explorer.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>target</em>.detachEvent(<em>eventNameWithOn</em>, <em>callback</em>) +</pre> + +<dl> + <dt>target</dt> + <dd>DOM елемент, для которого надо убрать обработчик.</dd> + <dt>eventNameWithOn</dt> + <dd>Название ивента, начинающийся на "on" (так если бы это был колбэк атрибут), чей обработчик должен быть убран. Например, вам следует использовать <code>"onclick" для удаления обработчика для данного "click" ивента.</code></dd> + <dt>callback</dt> + <dd>Функция, которую стоит убрать.</dd> +</dl> + +<h2 id="Спецификация">Спецификация</h2> + +<p>Не является частью спецификации.</p> + +<p>Microsoft <a href="https://msdn.microsoft.com/en-us/library/ms536411(v=vs.85).aspx">содержит описание на MSDN</a>.</p> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>6 thru 10 [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: <code>detachEvent()</code> больше не поддерживается в IE11+. {{domxref("EventTarget.removeEventListener()")}} поддерживается в IE9+.</p> + +<h2 id="Смотрите_так-же">Смотрите так-же</h2> + +<ul> + <li>{{ domxref("EventTarget.attachEvent()") }}</li> + <li>{{ domxref("EventTarget.fireEvent()") }}</li> +</ul> diff --git a/files/ru/conflicting/web/api/geolocation/index.html b/files/ru/conflicting/web/api/geolocation/index.html new file mode 100644 index 0000000000..7287eee669 --- /dev/null +++ b/files/ru/conflicting/web/api/geolocation/index.html @@ -0,0 +1,103 @@ +--- +title: NavigatorGeolocation +slug: Web/API/NavigatorGeolocation +translation_of: Web/API/Geolocation +translation_of_original: Web/API/NavigatorGeolocation +--- +<div>{{APIRef("Geolocation API")}}</div> + +<p><code><strong>NavigatorGeolocation</strong></code> содержит метод, позволяющий объектам реализовывать его,, получая {{domxref("Geolocation")}} экземпляр объекта.</p> + +<p>Здесь нет объектов типа <code>NavigatorGeolocation</code>, но некоторые интерфейсы, например, {{domxref("Navigator")}} реализуют его.</p> + +<h2 id="Свойства">Свойства</h2> + +<p><em>Интерфейс <code>NavigatorGeolocation</code></em><em> не наследует каких-либо свойств.</em></p> + +<dl> + <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> + <dd>Возвращает объект {{domxref("Geolocation")}} позволяющий получить доступ к местоположению устройства.</dd> +</dl> + +<h2 id="Методы">Методы</h2> + +<p><em><code>Интерфейс </code></em><em><code>NavigatorGeolocation</code></em><em> ни реализует, ни наследует никаких методов.</em></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> + <td>{{Spec2('Geolocation')}}</td> + <td>Изначальное описание</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + {{CompatNo}} 15.0<br> + 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Свойство</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Базовая поддержка</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown}}</td> + <td>10.60</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="/en-US/docs/WebAPI/Using_geolocation">Использование геолокации.</a></li> +</ul> diff --git a/files/ru/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/ru/conflicting/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..d8029e2378 --- /dev/null +++ b/files/ru/conflicting/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +tags: + - Событие +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +<p>Событие "abort" вызывается когда загрузка какого-либо ресурса была прервана.</p> + +<h2 id="Общая_информация">Общая информация</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Спецификация</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Интерфейс</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("UIEvent")}} если событие сгенерировано из пользовательского интерфейса, иначе {{domxref("Event")}}.</dd> + <dt style="float: left; text-align: right; width: 120px;">Всплывание</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Отменяемость</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> + <dt style="float: left; text-align: right; width: 120px;">Цель</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("window")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Действие по умолчанию</dt> + <dd style="margin: 0 0 0 120px;">Нет</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Свойство</th> + <th scope="col">Тип</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>Цель события (самый вышележащий элемент в DOM дереве).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>Тип события.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Поднимается ли событие вверх как принято или нет.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Является ли событие отменяемым или нет?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (свойство <code>window</code> объекта document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> diff --git a/files/ru/conflicting/web/api/index.html b/files/ru/conflicting/web/api/index.html new file mode 100644 index 0000000000..9ffb624bc7 --- /dev/null +++ b/files/ru/conflicting/web/api/index.html @@ -0,0 +1,131 @@ +--- +title: WebAPI +slug: Web/WebAPI +tags: + - API +translation_of: Web/API +translation_of_original: WebAPI +--- +<p><strong>WebAPI</strong> is a term used to refer to a suite of device compatibility and access APIs that allow Web apps and content to access device hardware (such as battery status or the device vibration hardware), as well as access to data stored on the device (such as the calendar or contacts list). By adding these APIs, we hope to expand what the Web can do today to also include what only proprietary platforms were able to do in the past.</p> + +<div class="note"> +<p><strong>Note:</strong> For a brief explanation of each badge, please see the <a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">packaged apps</a> documentation.</p> +</div> + +<p> </p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Communication APIs</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> + <dd>Provides basic information about the current network connection, such as connection speed.</dd> + <dt><a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> + <dd>The WebBluetooth API provides low-level access to the device's Bluetooth hardware.</dd> + <dt><a href="/en-US/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> + <dd>Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.</dd> + <dt><a href="/en-US/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> + <dd>Monitors data usage and exposes this data to privileged applications.</dd> + <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> + <dd>Lets apps place and answer phone calls and use the built-in telephony user interface.</dd> + <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>Lets apps send and receive SMS text messages, as well as to access and manage the messages stored on the device.</dd> + <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> + <dd>A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Hardware access APIs</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> + <dd>Provides access to the ambient light sensor, which lets your app detect the ambient light level in the vicinity of the device.</dd> + <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> + <dd>Provides information about the battery's charge level and whether or not the device is currently plugged in and charging.</dd> + <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> + <dd>Provides information about the device's physical location.</dd> + <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.</dd> + <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> + <dd>Lets you detect proximity of the device to a nearby object, such as the user's face.</dd> + <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> + <dd>Provides notifications when the device's orientation changes.</dd> + <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt> + <dd>Provides notifications when the screen's orientation changes. You can also use this API to let your app indicate what orientation it prefers.</dd> + <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/Vibration">Vibration API</a></dt> + <dd>Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is <strong>not</strong> intended for things such as notification vibrations. See the <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a> for that.</dd> + <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> + <dd>Allows apps to take photographs and/or record video using the device's built-in camera.</dd> + <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> + <dd>Lets apps turn on and off the screen, CPU, device power, and so forth. Also provides support for listening for and inspecting resource lock events.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">View All...</a></span></p> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Data management APIs</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a> {{NonStandardBadge}}</dt> + <dd>Provides support for writable files with locking support.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>Client-side storage of structured data with support for high-performance searches.</dd> + <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> + <dd>Lets apps examine and change system-wide configuration options that are permanently stored on the device.</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Other APIs</h2> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> + <dd>Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.</dd> + <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> + <dd>Lets the platform send notification messages to specific applications.</dd> + <dt><a href="/en-US/docs/Web/API/Push_API">Push API</a></dt> + <dd>Gives web applications the ability to receive messages pushed to them from a server, whether or not the web app is in the foreground, or even currently loaded, on a user agent.</dd> + <dt><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a></dt> + <dd>Lets applications send notifications displayed at the system level.</dd> + <dt><a href="/en-US/docs/Web/API/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> + <dd>The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.</dd> + <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>Lets an app delegate an activity to another app; for example, an app might ask another app to select (or create) and return a photo. Typically the user is able to configure what apps are used for which activities.</dd> + <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> {{NonStandardBadge}}</dt> + <dd>Lets Web content initiate payments and refunds for virtual goods.</dd> + <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd>Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>Lets apps receive notifications when the user is not actively using the device.</dd> + <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> + <dd>Manages app permissions in a centralized location. Used by the Settings app.</dd> + <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> + <dd>Provides support for setting the current time. The time zone is set using the <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">WebAPI community</h2> + +<p>If you need help with these APIs, there are several ways you can talk to other developers making use of them.</p> + +<ul> + <li>Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>Visit the WebAPI IRC channel: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + +<ul> + <li>The <a href="/en-US/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> is the representation of an HTML document as a tree.</li> + <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - Scripting language for the Web.</li> + <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: A list of WebAPI topics and their documentation status.</li> +</ul> +</div> +</div> + +<p> </p> + +<p> </p> diff --git a/files/ru/conflicting/web/api/node/index.html b/files/ru/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..7f7dbfb782 --- /dev/null +++ b/files/ru/conflicting/web/api/node/index.html @@ -0,0 +1,26 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>Свойство <code><strong>Node.baseURIObject</strong></code> возвращает {{Interface("nsIURI")}} представляющий базовый URL узла (обычно документ или элемент). Это похоже на {{domxref("Node.baseURI")}}, за исключением того, что возвращает nsIURI вместо строки.</p> + +<p>Это свойство существует на всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать его имея привилегии UniversalXPConnect.</p> + +<p>Смотрите {{domxref("Node.baseURI")}} для уточнения деталей что такое базовый URL.</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject +</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>Это свойство только для чтения; попытка записать информацию в него, будет сбрасывать исключения. <span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<p>Нет какой-либо спецификации.</p> diff --git a/files/ru/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/ru/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..11b342e6c3 --- /dev/null +++ b/files/ru/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,29 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +<div> +<div>{{APIRef("DOM")}}</div> +{{Non-standard_header}} + +<p>Свойство <code><strong>Node.nodePrincipal</strong></code> только для чтения, возвращающее объект {{Interface("nsIPrincipal")}}, представляющий текущий контекст безопасности узла.</p> + +<p>{{Note("Это свойство существует во всех узлах (HTML, XUL, SVG, MathML, и т.д.), но только если скрипт пытается использовать chrome привилегии.")}}</p> + +<h2 id="Syntax" name="Syntax">Синтаксис</h2> + +<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal +</pre> + +<h2 id="Notes" name="Notes">Примечания</h2> + +<p>Это свойство только для чтения; пытаясь вводить информацию в него, будет сбрасывать исключение.<span id="result_box" lang="ru"><span class="hps">Кроме того,</span> <span class="hps">это свойство может</span> <span class="hps">быть</span> <span class="hps">доступно только для</span> <span class="hps">привилегированного</span> <span class="hps">кода.</span></span></p> + +<h2 id="Specification" name="Specification">Спецификация</h2> + +<p>Нет никакой спецификации.</p> +</div> + +<p> </p> diff --git a/files/ru/conflicting/web/api/push_api/index.html b/files/ru/conflicting/web/api/push_api/index.html new file mode 100644 index 0000000000..40086e4e91 --- /dev/null +++ b/files/ru/conflicting/web/api/push_api/index.html @@ -0,0 +1,420 @@ +--- +title: Использование Push API +slug: Web/API/Push_API/Using_the_Push_API +translation_of: Web/API/Push_API +translation_of_original: Web/API/Push_API/Using_the_Push_API +--- +<p class="summary"><span class="seoSummary">W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> предоставляет некоторый захватывающий новый функционал для разработчиков для использования в web-приложениях: эта статья предлагает вводную информацию о том, как настроить Push-уведомления и управлять ими, с помощью простого демо.</span></p> + +<p>Возможность посылать сообщения или уведомления от сервера клиенту в любое время — независимо от того, активно приложение или нет — было прерогативой нативных приложений некоторое время, и наконец пришло в Web! Поддерживается большинства возможностей Push сейчас возможна в браузерах Firefox 43+ и Chrome 42+ на настольных компьютерах, мобильные платформы, возможно, скоро присоединятся. {{domxref("PushMessageData")}} на данный момент экспериментально поддерживаются только в Firefox Nightly (44+), и реализация может меняться.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Ранние версии Firefox OS использовали проприетарную версию этого API вызывая <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. Считается устаревшим по стандартам Push API.</p> +</div> + +<h2 id="Демо_основы_простого_сервера_чат-приложения">Демо: основы простого сервера чат-приложения</h2> + +<p>Демо, котрые мы создали, представляет начальное описание простого чат-приложения. Оно представляет собой форму, в которую вводятся данные, и кнопку для подписки на push-сообщения . Как только кнопка будет нажата, вы подпишитесь на push-сообщения, ваши данные будут записаны на сервере, а отправленное push-сообщение сообщит всем текущим подписчикам, что кто-то подписался.</p> + +<p>На данном этапе, имя нового подписчика появится в списке подписчиков, вместе с текстовым полем и кнопкой рассылки, чтобы позволить подписчику отправить сообщение.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> + +<p>Чтобы запустить демо, следуйте инструкциям на странице <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. Заметте, что серверная компонента все еще нуждается в небольшой доработке для запуска в Chrome и в общем запусается более разумным путем. Но аспекты Push все еще могут быть полностью понятны; мы углубимся в это после того, как просмотрим технологии в процессе.</p> + +<h2 id="Обзор_технологии">Обзор технологии</h2> + +<p>Эта секция предоставляет описание того, какие технологии учавствуют в примере.</p> + +<p>Web Push-сообщения это часть семейства технологий <a href="/en-US/docs/Web/API/Service_Worker_API">сервис воркеров</a>; в первую очередь, для получения push-сообщений сервис воркер должен быть активирован на странице. Сервис воркер получает push-сообщения, и затем вы сами решаете, как уведомить об этом страницу. Вы можете:</p> + +<ul> + <li>Отправить <a href="/en-US/docs/Web/API/Notifications_API">Web-уведомление</a>, которое вызовет всплытие системного уведомления. Для этого необходимо подтверждение разрешения на отправку push-сообщений.</li> + <li>Отправить сообщение обратно главной странице через {{domxref("MessageChannel")}}.</li> +</ul> + +<p>Обычно необходима комбинация этих двух решений; демо внизу включает пример обоих.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Вам необходим некоторый код, запущенный на сервере, для управления конечной точкой/шифроманием данных и отправки запросов push-сообщений. В нашем демо мы собрали на скорую руку сервер, используя <a href="https://nodejs.org/">NodeJS</a>.</p> +</div> + +<p>Сервис воркер так же должен подписаться на сервис push-сообщений. Каждой сессии предоставляется собственная уникальная конечная точка, когда она подписывается на сервис push-сообщений. Эта конечная точка получается из свойства ({{domxref("PushSubscription.endpoint")}}) объекта подписчика. Она может быть отправлена серверу и использоваться для пересылки сообщений активному сервис воркеру сессии. Каждый браузер имеет свой собсвтенный сервер push-сообщений для управления отправкой push-сообщений.</p> + +<h3 id="Шифрование">Шифрование</h3> + +<div class="note"> +<p><strong>Примечание</strong>: Для интерактивного краткого обзора, попробуйте JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> +</div> + +<p>Для отправки данных с помошью push-сообщений необходимо шифрование. Для этого необходим публичный ключ, созданный с использованием метода {{domxref("PushSubscription.getKey()")}}, который основывается на некотором комплексе механизмов шифрования, которые выполняются на стороне сервера; читайте <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a>. Со временем появятся библиотеки для управления генерацией ключей и шифроманием/дешифрованием push-сообщений; для этого демо мы используем Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> + +<div class="note"> +<p><strong>Примечание</strong>: Есть так же другая библиотека для управления шифрованием с помошью Node и Python, смотри <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> +</div> + +<h3 id="Обобщение_рабочего_процесса_Push">Обобщение рабочего процесса Push</h3> + +<p>Общие сведения ниже это то, что необходимо для реализации push-сообщений. Вы можете найти больше информации о некоторых частях демо в последующих частях.</p> + +<ol> + <li>Запрос на разрешение web-уведомлений или что-то другое, что вы используете и для чего необходимо разрешение.</li> + <li>Регистрация сервис воркера для контроля над страницей с помошью вызова {{domxref("ServiceWorkerContainer.register()")}}.</li> + <li>Подписка на сервис push-уведомлений с помошью {{domxref("PushManager.subscribe()")}}.</li> + <li>Запрашивание конечной точки, соответствующей подписчику, и генерация публичного ключа клиента ({{domxref("PushSubscription.endpoint")}} и {{domxref("PushSubscription.getKey()")}}. Заметте, что <code>getKey()</code> на данный момент эксперементальная технологий и доступна только в Firefox.)</li> + <li>Отправка данных на сервер, чтобы тот мог присылать push-сообщения, когда необходимо. Это демо использует {{domxref("XMLHttpRequest")}}, но вы можете использовать <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> + <li>Если вы используете <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> для связи с сервис воркером, установите новый канал связи ({{domxref("MessageChannel.MessageChannel()")}}) и отправте <code>port2</code> сервис воркеру с помошью вызова {{domxref("Worker.postMessage()")}} для того, чтобы открыть канал связи. Вы так же должны настроить слушателя для ответов на сообщения, которые будут отправляться обратно с сервис воркера.</li> + <li>На стороне сервера сохраните конечную точку и все остальные необходимые данные, чтобы они были доступны, когда будет необходимо отправить push-сообщение добавленному подписчику (мы используем простой текстовый файл, но вы можете использовать базу данных или все что угодно на ваш вкус). В приложении на продакшене убедитесь, что скрываете эти данные, так что злоумышленники не смогут украсть конечную точку и разослать спам подписчикам в push-сообщениях.</li> + <li>Для отправки push-сообщений необходимо отослать HTTP <code>POST</code> конечному URL. Запрос должен включать <code>TTL</code> заголовок, который ограничивает время пребывания сообщения в очереди, если пользователь не в сети. Для добавления полезной информации в запросе, необходимо зашифровать ее (что включает публичнй ключ клиента). В нашем примере мы используем <a href="https://github.com/marco-c/web-push">web-push</a> модуль, который управляет всей тяжелой работой.</li> + <li>Поверх в сервис воркере настройте обработчик событий <code>push</code> для ответов на полученные push-сообщения. + <ol> + <li>Если вы хотите отвечать отправкой сообщения канала обратно основному контексту (смотри шаг 6), необходимо сначала получить ссылку на <code>port2,</code> который был отправлен контексту сервис воркера ({{domxref("MessagePort")}}). Это доступно в объекте {{domxref("MessageEvent")}}, передаваемого обработчику <code>onmessage </code>({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Конкретнее, он находится в свойстве <code>ports</code>, индекс 0. Когда это сделано, вы можете отправить сообщение обратно <code>port1</code>, используя {{domxref("MessagePort.postMessage()")}}.</li> + <li>Если вы хотитет ответить запуском системного уведомления, вы можете сделать это, вызвав {{domxref("ServiceWorkerRegistration.showNotification()")}}. Заметте, что в нашем коде мы вызываем его внутри метода {{domxref("ExtendableEvent.waitUntil()")}} — это растягивает время жизни события, пока уведомление не будет запущено, так что мы можем убедиться, что все, что мы хотели, чтобы произошло, действительно произошло.<span id="cke_bm_307E" style="display: none;"> </span></li> + </ol> + </li> +</ol> + +<h2 id="Сборка_демо">Сборка демо</h2> + +<p>Давайте пройдемся по коду для демо, чтобы понять, как все работает.</p> + +<h3 id="HTML_и_CSS">HTML и CSS</h3> + +<p>Нет ничего примечательного в HTML и CSS демо; HTML содержит простую форму для ввода данных для фхода в чат, кнопку для подписки на push-уведомления и двух списков, в которых перечислены подписчики и сообщения чата. После подписки появляются дополнительные средства для того, чтобы пользователь мог ввести сообщение в чат.</p> + +<p>CSS был оставлен очень минимальным, чтобы не отвлекать от объяснения того, как функционируют Push API.</p> + +<h3 id="Основной_файл_JavaScript">Основной файл JavaScript</h3> + +<p> JavaScript очевидно намного более существенный. Давайте взглянем на основной файл JavaScript.</p> + +<h4 id="Переменные_и_начальные_настройки">Переменные и начальные настройки</h4> + +<p>Для начала определим некоторые переменные, которые будем использовать в нашем приложении:</p> + +<pre class="brush: js">var isPushEnabled = false; +var useNotifications = false; + +var subBtn = document.querySelector('.subscribe'); +var sendBtn; +var sendInput; + +var controlsBlock = document.querySelector('.controls'); +var subscribersList = document.querySelector('.subscribers ul'); +var messagesList = document.querySelector('.messages ul'); + +var nameForm = document.querySelector('#form'); +var nameInput = document.querySelector('#name-input'); +nameForm.onsubmit = function(e) { + e.preventDefault() +}; +nameInput.value = 'Bob';</pre> + +<p>Сначала нам необходимо создать две булевы переменные, для того чтобы отслеживать подписку на push-сообщения и подтверждение разрешения на рассылку уведомлений.</p> + +<p>Далее, мы перехватываем ссылку на {{htmlelement("button")}} подписки/отписки и задаем переменные для сохранения ссылок на наши кнопку отправки сообщения/ввода (который создастся только после успешной подписки).<br> + <br> + Следующие переменные перехватывают ссылки на три основные {{htmlelement("div")}} элемента, так что мы можем включить в них элементы (к примеру, когда появится кнопка <em>Отправки Сообщения Чата</em> или сообщение появится с писке <em>Сообщений</em>).</p> + +<p>Finally we grab references to our name selection form and {{htmlelement("input")}} element, give the input a default value, and use <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> to stop the form submitting when the form is submitted by pressing return.</p> + +<p>Next, we request permission to send web notifications, using {{domxref("Notification.requestPermission","requestPermission()")}}:</p> + +<pre class="brush: js">Notification.requestPermission();</pre> + +<p>Now we run a section of code when <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code> is fired, to start up the process of inialising the app when it is first loaded. First of all we add a click event listener to the subscribe/unsubscribe button that runs our <code>unsubscribe()</code> function if we are already subscribed (<code>isPushEnabled</code> is <code>true</code>), and <code>subscribe()</code> otherwise:</p> + +<pre class="brush: js">window.addEventListener('load', function() { + subBtn.addEventListener('click', function() { + if (isPushEnabled) { + unsubscribe(); + } else { + subscribe(); + } + });</pre> + +<p>Next we check to see if service workers are supported. If so, we register a service worker using {{domxref("ServiceWorkerContainer.register()")}}, and run our <code>initialiseState()</code> function. If not, we deliver an error message to the console.</p> + +<pre class="brush: js"> // Check that service workers are supported, if so, progressively + // enhance and add push messaging support, otherwise continue without it. + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('sw.js').then(function(reg) { + if(reg.installing) { + console.log('Service worker installing'); + } else if(reg.waiting) { + console.log('Service worker installed'); + } else if(reg.active) { + console.log('Service worker active'); + } + + initialiseState(reg); + }); + } else { + console.log('Service workers aren\'t supported in this browser.'); + } +}); +</pre> + +<p>The next thing in the source code is the <code>initialiseState()</code> function — for the full commented code, look at the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (we are not repeating it here for brevity's sake.)</p> + +<p><code>initialiseState()</code> first checks whether notifications are supported on service workers, then sets the <code>useNotifications</code> variable to <code>true</code> if so. Next, it checks whether said notifications are permitted by the user, and if push messages are supported, and reacts accordingly to each.</p> + +<p>Finally, it uses {{domxref("ServiceWorkerContainer.ready()")}} to wait until the service worker is active and ready to start doing things. Once its promise resolves, we retrieve our subscription to push messaging using the {{domxref("ServiceWorkerRegistration.pushManager")}} property, which returns a {{domxref("PushManager")}} object that we then call {{domxref("PushManager.getSubscription()")}} on. Once this second inner promise resolves, we enable the subscribe/unsubscribe button (<code>subBtn.disabled = false;</code>), and check that we have a subscription object to work with.</p> + +<p>If we do, then we are already subscribed. This is possible when the app is not open in the browser; the service worker can still be active in the background. If we're subscribed, we update the UI to show that we are subscribed by updating the button label, then we set <code>isPushEnabled</code> to <code>true</code>, grab the subscription endpoint from {{domxref("PushSubscription.endpoint")}}, generate a public key using {{domxref("PushSubscription.getKey()")}}, and run our <code>updateStatus()</code> function, which as you'll see later communicates with the server.</p> + +<p>As an added bonus, we set up a new {{domxref("MessageChannel")}} using the {{domxref("MessageChannel.MessageChannel()")}} constructor, grab a reference to the active service worker using {{domxref("ServiceworkerRegistration.active")}}, then set up a channel betweeen the main browser context and the service worker context using {{domxref("Worker.postMessage()")}}. The browser context receives messages on {{domxref("MessageChannel.port1")}}; whenever that happens, we run the <code>handleChannelMessage()</code> function to decide what to do with that data (see the {{anch("Handling channel messages sent from the service worker")}} section).</p> + +<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4> + +<p>Let's now turn our attention to the <code>subscribe()</code> and <code>unsubscribe()</code> functions used to subscribe/unsubscribe to the push notification service.</p> + +<p>In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p> + +<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p> + +<p>The <code>unsubscribe()</code> function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.</p> + +<p>Appropriate error handling is also provided in both functions. </p> + +<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> + +<pre class="brush: js">function subscribe() { + // Disable the button so it can't be changed while + // we process the permission request + + subBtn.disabled = true; + + navigator.serviceWorker.ready.then(function(reg) { + reg.pushManager.subscribe({userVisibleOnly: true}) + .then(function(subscription) { + // The subscription was successful + isPushEnabled = true; + subBtn.textContent = 'Unsubscribe from Push Messaging'; + subBtn.disabled = false; + + // Update status to subscribe current user on server, and to let + // other users know this user has subscribed + var endpoint = subscription.endpoint; + var key = subscription.getKey('p256dh'); + updateStatus(endpoint,key,'subscribe'); + }) + .catch(function(e) { + if (Notification.permission === 'denied') { + // The user denied the notification permission which + // means we failed to subscribe and the user will need + // to manually change the notification permission to + // subscribe to push messages + console.log('Permission for Notifications was denied'); + + } else { + // A problem occurred with the subscription, this can + // often be down to an issue or lack of the gcm_sender_id + // and / or gcm_user_visible_only + console.log('Unable to subscribe to push.', e); + subBtn.disabled = false; + subBtn.textContent = 'Subscribe to Push Messaging'; + } + }); + }); +}</pre> + +<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4> + +<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p> + +<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p> + +<ul> + <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li> + <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li> + <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li> +</ul> + +<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> + +<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4> + +<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p> + +<pre class="brush: js">channel.port1.onmessage = function(e) { + handleChannelMessage(e.data); +}</pre> + +<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p> + +<p>The <code>handleChannelMessage()</code> function looks like this:</p> + +<pre class="brush: js">function handleChannelMessage(data) { + if(data.action === 'subscribe' || data.action === 'init') { + var listItem = document.createElement('li'); + listItem.textContent = data.name; + subscribersList.appendChild(listItem); + } else if(data.action === 'unsubscribe') { + for(i = 0; i < subscribersList.children.length; i++) { + if(subscribersList.children[i].textContent === data.name) { + subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]); + } + } + nameInput.disabled = false; + } else if(data.action === 'chatMsg') { + var listItem = document.createElement('li'); + listItem.textContent = data.name + ": " + data.msg; + messagesList.appendChild(listItem); + sendInput.value = ''; + } +}</pre> + +<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p> + +<ul> + <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li> + <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li> + <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p> +</div> + +<h4 id="Sending_chat_messages">Sending chat messages</h4> + +<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a <code>statusType</code> of <code>chatMsg</code>.</p> + +<h3 id="The_server">The server</h3> + +<p>As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p> + +<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:</p> + +<ul> + <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li> + <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li> + <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li> + <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li> +</ul> + +<p>A couple more things to note:</p> + +<ul> + <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li> + <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li> +</ul> + +<h3 id="The_service_worker">The service worker</h3> + +<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's <code>action</code> property:</p> + +<ul> + <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li> + <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li> +</ul> + +<pre class="brush: js">self.addEventListener('push', function(event) { + var obj = event.data.json(); + + if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { + fireNotification(obj, event); + port.postMessage(obj); + } else if(obj.action === 'init' || obj.action === 'chatMsg') { + port.postMessage(obj); + } +});</pre> + +<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p> + +<pre class="brush: js">function fireNotification(obj, event) { + var title = 'Subscription change'; + var body = obj.name + ' has ' + obj.action + 'd.'; + var icon = 'push-icon.png'; + var tag = 'push'; + + event.waitUntil(self.registration.showNotification(title, { + body: body, + icon: icon, + tag: tag + })); +}</pre> + +<p>Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> + +<p>Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p> + +<div class="note"> +<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> +</div> + +<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2> + +<p>Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example. This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.</p> + +<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token"> // do something, usually resubscribe to push and +</span> <span class="comment token"> // send the new subscription details back to the +</span> <span class="comment token"> // server via XHR or Fetch +</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.</p> + +<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2> + +<p>To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.</p> + +<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3> + +<p>To get this set up, follow these steps:</p> + +<ol> + <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a> and set up a new project.</li> + <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then + <ol> + <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li> + <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li> + <li>Click the <em>Enable API</em> button.</li> + </ol> + </li> + <li>Now you need to make a note of your project number and API key because you'll need them later. To find them: + <ol> + <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li> + <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li> + </ol> + </li> +</ol> + +<h3 id="manifest.json">manifest.json</h3> + +<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p> + +<pre class="brush: js">{ + "name": "Push Demo", + "short_name": "Push Demo", + "icons": [{ + "src": "push-icon.png", + "sizes": "111x111", + "type": "image/png" + }], + "start_url": "/index.html", + "display": "standalone", + "gcm_sender_id": "224273183921" +}</pre> + +<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p> + +<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> + +<h3 id="userVisibleOnly">userVisibleOnly</h3> + +<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> + <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> +</div> diff --git a/files/ru/conflicting/web/api/svgaelement/target/index.html b/files/ru/conflicting/web/api/svgaelement/target/index.html new file mode 100644 index 0000000000..dcd76310d4 --- /dev/null +++ b/files/ru/conflicting/web/api/svgaelement/target/index.html @@ -0,0 +1,107 @@ +--- +title: SVGAElement.target +slug: Web/API/SVGAElement/SVGAlement.target +translation_of: Web/API/SVGAElement/target +translation_of_original: Web/API/SVGAElement/SVGAlement.target +--- +<p>{{APIRef("SVGAElement")}}</p> + +<p> </p> + +<p>Свойство <code><strong>SVGAElement.target</strong></code> для чтения только {{domxref ("SVGAElement")}} возвращает объект {{domxref ("SVGAnimatedString")}}, который указывает часть целевого окна, фрейма, панель, в которую открывается при активации ссылки.</p> + +<p>Это свойство используется, когда существует множество возможных целей для конечного ресурса, например, когда родительский документ является документом HTML или HTML-документом mlti-frame.</p> + +<p> </p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre><code><em>myLink</em>.target = '<em>value</em>';</code></pre> + +<h3 id="Стоимость">Стоимость</h3> + +<p>{{Domxref ("SVGAnimatedString")}}, указывающий конечную цель ресурса, которая открывает документ при активации ссылки.</p> + +<p>Значения для {{domxref ("target")}} можно увидеть <a href="https://www.w3.org/TR/2011/REC-SVG11-20110816/linking.html#AElementTargetAttribute">here</a></p> + +<h2 id="Пример">Пример</h2> + +<p>Код взят из <a href="/en-US/docs/Web/API/SVGAElement#Example">"SVGAElement example code"</a></p> + +<pre class="brush: js">... +var linkRef = document.querySelector('a'); +linkRef.target ='_blank'; +...</pre> + +<h2 id="Характеристики">Характеристики</h2> + +<table class="standard-table"> + <tbody> + <tr> + <td>Спецификация</td> + <td>Статус</td> + <td>Комментарий</td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#InterfaceSVGAElement', 'target')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузером</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>9.0</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li>{{ SVGAttr("target") }}</li> +</ul> diff --git a/files/ru/conflicting/web/api/web_storage_api/index.html b/files/ru/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..b63a374c8c --- /dev/null +++ b/files/ru/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,368 @@ +--- +title: DOM Storage guide +slug: Web/Guide/API/DOM/Storage +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +<h2 id="sect1"> </h2> + +<p>DOM хранилище (DOM Storage) - это название для набора инструментов, <a href="http://www.whatwg.org/specs/web-apps/current-work/#storage">относящихся к хранилищам</a>, впервые представленных в спецификации <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, и выделенных теперь в отдельную специкацию <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM хранилище было разработано с целью предоставления альтернативы хранению информации в кукисах. Предполагается, что DOM хранилище предоставляет больше объема, оно более защищено и легче в использовании. Впервые оно было представлено в браузерах <a href="/en-US/docs/Firefox_2_for_developers" title="Firefox_2_for_developers">Firefox 2</a> и <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> + +<div class="note"><strong>Заметка:</strong> DOM хранилище - это не то же самое, что <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (Mozilla's XPCOM interfaces to SQLite) или <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (утилита <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> - хранилище для использования в расширениях).</div> + +<div class="note"> +<p><strong>Заметка:</strong> Эта статья скоро будет сильно переработана. В<span style="line-height: 1.5;">место того, чтобы хранить всю информацию на одной странице, она будет</span><span style="line-height: 1.5;"> разбита на несколько статей, каждая из которых будет описывать разные </span><span style="line-height: 1.5;">API хранилища. Отдельная статья, помогающая разобраться в разных API, будет также добавлена.</span></p> +</div> + +<h2 id="Описание">Описание</h2> + +<p>Механизм DOM хранилища - средство, благодаря которому можно безопасно хранить и позже извлекать пары "ключ / значение". Целью этого является обеспечение комплексного средства, с помощью которого можно разрабатывать интерактивные приложения(включая приложения с продвинутыми возможностями, такими как возможность работать "автономно"("offline") в течение длительных периодов времени).</p> + +<p>Браузеры на основе Mozilla, Internet Explorer 8 +, Safari 4 + и Chrome обеспечивают рабочую реализацию спецификации DOM хранилища. (В случае, если нужна кросс-браузерная поддержка функциональности, включая более старые версии IE, будет полезно отметить, что IE также имеет подобную легаси функциональность под названием "<a href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">USERDATA поведение</a>", которая дополненяет DOM хранилище IE в IE8.)</p> + +<p>DOM хранилище удобно, потому что нет других хороших способов хранения разумных объемов данных за любой период времени, встроенных в браузер. <a href="http://en.wikipedia.org/wiki/HTTP_cookie">Кукисы </a>ограничены в количестве хранимой информации и не обеспечивают поддержку для организации постоянных данных, а другие методы (например, <a href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">флэш-локальное хранилище</a>) требуют плагина.</p> + +<p>Одним из первых известных приложений, использующих новые функциональные возможности DOM хранилища(в дополнение к USERDATA поведения в Internet Explorer) было <a href="http://aaronboodman.com/halfnote/">halfnote </a>(приложение для заметок), написанное <a href="http://aaronboodman.com/">Аароном Будменом</a>. В своем приложении, Аарон одновременно сохранял заметки на сервере (когда/если Интернет-подключение был доступно) и локального хранилища данных(в обратном случае). Это дало возможность пользователю смело писать резервные копии заметок даже при нерегулярном подключении к Интернету.</p> + +<p>Хотя идея и реализация halfnote были сравнительно простыми, создание halfnote показывает возможность для нового поколения веб-приложений, которые можно использовать как в онлайн-, так и оффлайн- режиме.</p> + +<h2 id="Связь">Связь</h2> + +<p>Ниже приведены глобальные объекты, которые существуют как свойства каждого объекта <span style="line-height: 1.5;"> </span><code style="line-height: 1.5;"><a href="/en-US/docs/DOM/window" style="line-height: 1.5;" title="DOM/window">window</a></code><span style="line-height: 1.5;">. Это означает, что они могут быть доступны как </span><code style="font-style: normal;">sessionStorage</code> <span style="line-height: 1.5;">или </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">window.sessionStorage</span><span style="line-height: 1.5;">. (Это важно, потому что вы можете использовать фреймы(IFrames) для хранения или доступа, дополнительные данные кроме того, что сразу же включено на странице.)</span></p> + +<h3 id="Storage"><code>Storage</code></h3> + +<p>Это конструктор<span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">) </span><span style="line-height: 1.5;">для всех экземпляров </span><span style="line-height: 1.5;">Storage </span><span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">globalStorage[location.hostname]</code>).</p> + +<p><span style="line-height: 1.5;">С</span><span style="line-height: 1.5;">охранение </span><code style="font-style: normal; line-height: 1.5;">Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code><span style="line-height: 1.5;"> будет доступно через </span><code style="font-style: normal; line-height: 1.5;">localStorage.removeKey</code><span style="line-height: 1.5;"> и </span><code style="font-style: normal; line-height: 1.5;">sessionStorage.removeKey</code><span style="line-height: 1.5;">.</span></p> + +<p>Единицы <code>globalStorage</code> являются экземплярами <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">StorageObsolete,</span> а <span style="line-height: 1.5;">не </span><code style="font-style: normal; line-height: 1.5;">Storage</code><span style="line-height: 1.5;">.</span></p> + +<p><code>Storage</code> определен в WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> следующим образом:</p> + +<pre class="eval">interface <dfn>Storage</dfn> { + readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; + [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); + [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); + [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); + [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); + void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); +}; +</pre> + +<div class="note"><strong>Заметка: </strong>Несмотря на то, что значения доступны для чтения и записи через стандартные способы Javascript, рекомендуется использование <span style="line-height: 1.5;">getItem и setItem.</span></div> + +<div class="note"><strong>Заметка:</strong> Обратите внимание, что любые данные, которые хранятся в любом из хранилищ, описанных на этой странице, преобразуются в строку, используя метод<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: 1.5;">.toString</span><span style="line-height: 1.5;">. перед тем, как сохранить значение. Попытка сохранить объект приведет к сохранению строки </span><code style="font-style: italic;">"[object Object]"</code> <span style="line-height: 1.5;">вместо объекта или его JSON </span><span style="line-height: 1.5;">представления</span><span style="line-height: 1.5;">. Самым лучшим и распространенным способом сохранения объектов в формате строки является использование п</span><span style="line-height: 1.5;">редоставляемых браузером </span><span style="line-height: 1.5;">методов JSON для парсинга</span><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">и сериализации объектов.</span></div> + +<h3 id="sessionStorage"><code>sessionStorage</code></h3> + +<p>Это глобальный объект <span style="line-height: 1.5;">(</span><code style="font-style: normal; line-height: 1.5;">sessionStorage</code><span style="line-height: 1.5;">), который сохраняет значения, которые доступны в течение периода текущей сессии. Сессия страницы длится, пока браузер открыт, и восстанавливает свои значения после перегрузки страницы. Открытие страницы в новой вкладке или окне приведет к созданию новой сессии для этой страницы.</span></p> + +<pre class="brush:js">// Сохранить данные в текущем хранилизе сессий +sessionStorage.setItem("username", "John"); + +// Получить значения сохраненного значения +alert( "username = " + sessionStorage.getItem("username")); +</pre> + +<p>Объект <code>sessionStorage</code> наиболее полезен для хранения временных данных, которые должны быть восстановлены, если страница браузер была случайно перегружена.</p> + +<p><strong>Примеры:</strong></p> + +<p>Автоматическое сохранение содержимого тестового поля, и если страница была случайно перегружена, то данные не будут потеряны.</p> + +<pre class="brush:js"> // Получить значение текстового поля, которое мы собираемся отслеживать + var field = document.getElementById("field"); + + // Проверяем, что значение поля autosave существует + // (это будет происходить при случайной перезагрузке страницы) + if (sessionStorage.getItem("autosave")) { + // Восстановить значение тестового поля + field.value = sessionStorage.getItem("autosave"); + } + + // Прослушивать изменения значения текстового поля + field.addEventListener("change", function() { + // И сохранить результаты в объект хранилища сессий + sessionStorage.setItem("autosave", field.value); + }); +</pre> + +<p><strong>Больше информации:</strong></p> + +<ul> + <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> +</ul> + +<h3 id="localStorage" name="localStorage"><code>localStorage</code></h3> + +<p><code>localStorage</code> - это то же самое, что и<code> {{ Anch("sessionStorage") }},</code> поддерживает правила единого происхождения(same-origin rules), но хранение данных постоянно. <code>localStorage</code> был представлен в Firefox 3.5.</p> + +<div class="note"><strong>Заметка:</strong> Когда браузер переходит в частный режим браузера(<span style="line-height: 1.5;">private browsing mode), то новая, временная база данных создается для хранения данных локального хранилища; эта база данных очищается и удаляется, как только частный режим браузера выключается.</span></div> + +<h4 id="Совместимость">Совместимость</h4> + +<p>Объекты <code>Storage -</code> относительно недавнее дополнение стандарта. Это означает, что они не обязательно должны быть реализованы во всех браузерах. Проблему можно решить с помощью включения следующего куска кода в начале вашего скрипта, позволяя использовать объект <code>localStorage</code> в реализациях, которые нативно не поддерживают его.</p> + +<p>Следующий алгоритм - это точная имитация объекта <code style="font-style: normal; line-height: 1.5;">localStorage,</code> но использует куки.</p> + +<pre class="brush:js">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> + +<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.setItem()</code> and <code>localStorage.removeItem()</code> to add, change, or remove a key. The use of methods <code>localStorage.yourKey = yourValue;</code> and <code>delete localStorage.yourKey;</code> to set or delete a key <strong>is not a secure way with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> + +<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> + +<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p> + +<pre class="brush:js">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> + +<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> + +<div class="note"><strong>Note:</strong> By changing the string <code style="background: #ccc;">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: #ccc;">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> + +<h4 id="Compatibility_and_relation_with_globalStorage">Compatibility and relation with globalStorage</h4> + +<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p> + +<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p> + +<h3 id="globalStorage"><code>globalStorage</code></h3> + +<div>{{ Non-standard_header }}{{ obsolete_header("13.0") }}</div> + +<p><code>globalStorage </code>is obsolete since Gecko 1.9.1 (Firefox 3.5) and unsupported since Gecko 13 (Firefox 13). Just use<code> {{ Anch("localStorage") }} </code>instead. This proposed addition to HTML5 has been removed from the HTML5 specification in favor of<code> {{ Anch("localStorage") }}</code>, which is implemented in Firefox 3.5. This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g., over multiple pages and browser sessions).</p> + +<div class="warning">Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div> + +<pre class="eval deki-transform">// Save data that only scripts on the mozilla.org domain can access +globalStorage['mozilla.org'].setItem("snippet", "<b>Hello</b>, how are you?"); +</pre> + +<p>Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p> + +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li> +</ul> + +<p><strong>Examples:</strong></p> + +<p>All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p> + +<p>Remember a user's username for the particular sub-domain that is being visited:</p> + +<pre class="eval deki-transform"> globalStorage['developer.mozilla.org'].setItem("username", "John"); +</pre> + +<p>Keep track of the number of times that a user visits all pages of your domain:</p> + +<pre class="eval deki-transform"> // parseInt must be used since all data is stored as a string + globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1); +</pre> + +<h2 id="Расположение_хранилища_и_очищение_данных">Расположение хранилища и очищение данных</h2> + +<p>In Firefox the DOM storage data is stored in the <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" title="http://kb.mozillazine.org/Webappsstore.sqlite">webappsstore.sqlite file</a> in the profile folder (there's also chromeappsstore.sqlite file used to store browser's own data, <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=592990" title="https://bugzilla.mozilla.org/show_bug.cgi?id=592990">notably for the start page - about:home</a>, but potentially for other internal pages with "about:" URLs).</p> + +<ul> + <li>DOM Storage can be cleared via "Tools -> Clear Recent History -> Cookies" when Time range is "Everything" (via nsICookieManager::removeAll) + <ul> + <li>But not when another time range is specified: (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=527667" title="https://bugzilla.mozilla.org/show_bug.cgi?id=527667">bug 527667</a>)</li> + <li>Does not show up in Tools -> Options -> Privacy -> Remove individual cookies (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=506692" title="https://bugzilla.mozilla.org/show_bug.cgi?id=506692">bug 506692</a>)</li> + </ul> + </li> + <li>DOM Storage is <strong>not</strong> cleared via Tools -> Options -> Advanced -> Network -> Offline data -> Clear Now.</li> + <li>Doesn't show up in the "Tools -> Options -> Advanced -> Network -> Offline data" list, unless the site also uses the offline cache. If the site does appear in that list, its DOM storage data is removed along with the <a href="/en-US/docs/HTML/Using_the_application_cache" title="Offline resources in Firefox">offline cache</a> when clicking the Remove button.</li> +</ul> + +<p>See also <a href="/en-US/docs/HTML/Using_the_application_cache#Storage_location_and_clearing_the_offline_cache" title="Offline resources in Firefox#Storage location and clearing the offline cache">clearing offline resources cache</a>.</p> + +<h2 id="Больше_информации">Больше информации</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> + +<h2 id="Примеры">Примеры</h2> + +<ul> + <li><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" title="JavaScript Web Storage Tutorial: Creating an Address Book Application">JavaScript Web Storage Tutorial: Creating an Address Book Application</a> - Hands-on tutorial describing how to use the Web Storage API by creating a simple address book application.</li> + <li><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">offline web applications</a> at hacks.mozilla.org - Showcases an offline app demo and explains how it works.</li> + <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Note writing application that stores all data locally.</li> + <li><a class="external" href="http://github.com/eligrey/jData-host" title="http://github.com/eligrey/jData-host">jData</a> - A shared localStorage object interface that can be accessed by any website on the internet and works on Firefox 3+, Webkit 3.1.2+ nightlies, and IE8. Think of it as pseudo-globalStorage[""] but write access needs user confirmation.</li> + <li><a class="external" href="http://codebase.es/test/webstorage.html" title="http://codebase.es/test/webstorage.html">HTML5 localStorage example</a> - Very simple and easy to understand example of localStorage. Saves and retrieves texts and shows a list of saved items. Tested in Firefox 3 or higher.</li> + <li><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">HTML5 Session Storage</a> - A very simple example of session storage. Also includes a example on local storage. Tested in Firefox 3.6 or higher.</li> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/"><strike>Basic DOMStorage Examples</strike></a><strike> - Broken in Firefox 3 and up due to use of globalStorage on one domain level up from the current domain which is not allowed in Firefox 3.</strike></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/"><strike>halfnote</strike></a><strike> - (displaying broken in Firefox 3) Note writing application that uses DOM Storage.</strike></li> +</ul> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>localStorage</td> + <td>4</td> + <td>3.5</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>sessionStorage</td> + <td>5</td> + <td>2</td> + <td>8</td> + <td>10.50</td> + <td>4</td> + </tr> + <tr> + <td>globalStorage</td> + <td>{{ CompatNo }}</td> + <td>2-13</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>2.1</td> + <td>{{ CompatUnknown }}</td> + <td>8</td> + <td>11</td> + <td>iOS 3.2</td> + </tr> + </tbody> +</table> +</div> + +<p>All browsers have varying capacity levels for both localStorage and sessionStorage. Here is a <a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/">detailed rundown of all the storage capacities for various browsers</a>.</p> + +<div class="note"> +<p><strong>Note: </strong>since iOS 5.1, Safari Mobile stores localStorage data in the cache folder, which is subject to occasional clean up, at the behest of the OS, typically if space is short.</p> +</div> + +<h2 id="Полезные_ссылки">Полезные ссылки</h2> + +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en-US/docs/DOM/document.cookie" title="DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en-US/docs/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> + <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMStorageEventObsolete" title="XPCOM Interface Reference/nsIDOMStorageEventObsolete">nsIDOMStorageEventObsolete</a></li> + <li><a href="/en-US/docs/DOM/event/StorageEvent" title="DOM/Event/StorageEvent">StorageEvent</a></li> + <li><a href="/en-US/docs/DOM/Storage/Implementation" title="/en-US/docs/DOM/Storage/Implementation">Implementation Details</a></li> +</ul> + +<div>{{ HTML5ArticleTOC }}</div> diff --git a/files/ru/conflicting/web/api/webrtc_api/index.html b/files/ru/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..d8fbf01983 --- /dev/null +++ b/files/ru/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,35 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: Web/Guide/API/WebRTC +--- +<p><strong>WebRTC</strong> (где RTC расшифровывается как Real-Time Communications) - это технология, которая позволяет передавать данные и потоковое аудио/видео между браузерами. Как набор стандартов в целом, WebRTC предоставляет любым поддерживающим этот стандарт, браузерам обмениваться данными и устраивать сеансы телеконференций в режиме точка-точка, без необходимости устанавливать какие-либо плагины и стороннее програмное обеспечение.</p> + +<p>Компоненты WebRTC доступны через API JavaScript: Network Stream API, который представляет собой поток аудио и видео данных, PeerConnection API, который позволяет двум и более пользователям общаться браузер-браузер напрямую, DataChannel API, который позволяет обмениваться данными других типов, например в играх в режиме реального времени, текстовые чаты, обмен файлами и так далее.</p> + +<div class="note"> +<p><span style="color: #000000;"><strong>На заметку:</strong> Эта документация находится в процессе переезда <a href="/ru/docs/Web/API/WebRTC_API">в свой новый дом</a>.</span></p> +</div> + +<h2 id="Руководства">Руководства</h2> + +<dl> + <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Обмен данными в режиме точка-точка с WebRTC</a></dt> + <dd>О том, как наладить обмен данными в режиме точка-точка используя API WebRTC.</dd> + <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Введение в архитектуру WebRTC</a></dt> + <dd><strong>(AKA "WebRTC and the Ocean of Acronyms")</strong> WebRTC состоит из множества частей и это может быть причиной сложностей для новичков. Эта статья рассказывает обо всех частях и объясняет то как они между собой связаны.</dd> + <dt><a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics">Основы WebRTC </a></dt> + <dd>Теперь, когда вы уже знаете архитектуру WebRTC, вы можете перейти к этой статье, которая проведет вас через путь создания кросс-браузерного RTC-приложения</dd> +</dl> + +<h2 id="Ссылки">Ссылки</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices.getUserMedia</a></dt> + <dd>API захвата медиа (видео/аудио)</dd> + <dt><a href="/en-US/docs/Web/API/RTCPeerConnection"><span style="color: #0095dd;">RTCPeerConnection</span></a></dt> + <dd>Интерфейс обработки потоковых данных между двуми пирами.</dd> + <dt><a href="/en-US/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> + <dd>Интерфейс передачи произвольных данных через соединение точка-точка.</dd> +</dl> diff --git a/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html new file mode 100644 index 0000000000..863dde7e14 --- /dev/null +++ b/files/ru/conflicting/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -0,0 +1,351 @@ +--- +title: Основы WebRTC +slug: Web/API/WebRTC_API/WebRTC_basics +translation_of: Web/API/WebRTC_API/Signaling_and_video_calling +translation_of_original: Web/API/WebRTC_API/WebRTC_basics +--- +<p>{{WebRTCSidebar}}</p> + +<p>{{Draft}}</p> + +<div class="summary"> +<p>После того, как вы понимаете <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Architecture" title="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture">WebRTC architecture</a>, вы можете прочитать эту статью, которая сопроводит вас через создание кросс-браузерного RTC приложения. К концу этой документации, вы должны иметь рабочие каналы соединения равноправных узлов ЛВС и передачи данных средств массовой информации.</p> +</div> + +<h2 id="Полу-старое_содержание_из">Полу-старое содержание, из</h2> + +<h2 id="RTCPeerConnection">RTCPeerConnection</h2> + +<p>Материал здесь происходит от RTCPeerConnection; она может остаться здесь, или же может переместится в другое место.</p> + +<p><strong>Основы использования</strong><br> + Базовое использование RTCPeerConnection предполагает переговоры связь между локальной машиной и удаленной машиной один генерируя Session Description Protocol для обмена между ними. Вызывающая программа начинает процесс, отправив предложение на удаленное устройство, которое реагирует либо принять или отклонить запрос на соединение.</p> + +<p>Обе стороны (вызывающий и вызываемый абонент) необходимо настроить свои собственные экземпляры RTCPeerConnection, чтобы представить их конец соединения равноправных узлов ЛВС:</p> + +<pre class="brush: js notranslate">var pc = new RTCPeerConnection(); +pc.onaddstream = function(obj) { + var vid = document.createElement("video"); + document.appendChild(vid); + vid.srcObject = obj.stream; +} + +// функция помощник +function endCall() { + var videos = document.getElementsByTagName("video"); + for (var i = 0; i < videos.length; i++) { + videos[i].pause(); + } + + pc.<a href="#close()">close</a>(); + + +function error(err) { + endCall(); +} +</pre> + +<h3 id="При_инициализации_вызова">При инициализации вызова</h3> + +<p>Если вы один инициирующий вызов, вы будете использовать navigator.getUserMedia(), чтобы получить видеопоток, а затем добавить поток в RTCPeerConnection. Как только это было сделано, вызов RTCPeerConnection, чтобы создать предложение, настроить предложение, а затем отправить его на сервер, через соединение которое было создано.</p> + +<pre class="brush: js notranslate">// Получить список людей с сервера +// Пользователь выбирает список людей, чтобы установить соединение с нужным человеком +navigator.getUserMedia({video: true}, function(stream) { + // Добавление локального потока не вызовет onaddstream обратного вызова, + // так называют его вручную. + pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); + pc.<a href="#addStream()">addStream</a>(stream); + + pc.<a href="#createOffer()">createOffer</a>(function(offer) { + pc.<a href="#setLocalDescription()">setLocalDescription</a>(offer, function() { + // send the offer to a server to be forwarded to the friend you're calling. + }, error); + }, error); +}); +</pre> + +<h3 id="Ответ_на_вызов">Ответ на вызов</h3> + +<p>На противоположном конце, друг получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение прибывает, {{domxref ("navigator.getUserMedia ()")}} вновь используется для создания потока, который добавляется к RTCPeerConnection. {{Domxref ("RTCSessionDescription")}} объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> + +<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> + +<pre class="brush: js notranslate">var offer = getOfferFromFriend(); +navigator.getUserMedia({video: true}, function(stream) { + pc.onaddstream = e => video.src = URL.createObjectURL(e.stream); + pc.<a href="#addStream()">addStream</a>(stream); + + pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() { + pc.<a href="#createAnswer()">createAnswer</a>(function(answer) { + pc.<a href="#setLocalDescription()">setLocalDescription</a>(answer, function() { + // send the answer to a server to be forwarded back to the caller (you) + }, error); + }, error); + }, error); +}); +</pre> + +<p><strong>Ответ на вызов</strong></p> + +<p>На противоположном конце, человек получит предложение от сервера, используя любой протокол используется для того чтобы сделать это. После того, как предложение принято, navigator.getUserMedia () вновь используется для создания потока, который добавляется к RTCPeerConnection. объект создается и установить в качестве удаленного описания с помощью вызова {{domxref ("RTCPeerConnection.setRemoteDescription ()")}}.</p> + +<p>Тогда ответ создается с помощью RTCPeerConnection.createAnswer () и отправляется обратно на сервер, который направляет его к вызывающему абоненту.</p> + +<pre class="brush: js notranslate">// ПК был создан раньше, когда мы сделали первоначальное предложение +var offer = getResponseFromFriend(); +pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error);</pre> + +<h2 id="Old_content_follows!">Old content follows!</h2> + +<p>Все, что находится ниже этого пункта, потенциально устарело. Это по-прежнему находится в стадии рассмотрения и возможного включения в другие части документации, если они все еще актуальны.</p> + +<div class="note"> +<p><strong>Не используйте примеры на этой странице.</strong> Смотрите статью <a href="/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling">Signaling and video calling</a> для работы, актуальный пример с использованием WebRTC media.</p> +</div> + +<h3 id="Note">Note</h3> + +<p>Due to recent changes in the API there are many old examples that require fixing:</p> + +<ul> + <li><a href="http://louisstow.github.io/WebRTC/media.html">louisstow</a></li> + <li><a href="http://mozilla.github.io/webrtc-landing/">mozilla</a></li> + <li><a href="https://www.webrtc-experiment.com/">webrtc-experiment</a></li> +</ul> + +<p>The currently working example is:</p> + +<ul> + <li><a href="https://apprtc.appspot.com">apprtc</a> (<a href="https://github.com/webrtc/apprtc">source</a>)</li> +</ul> + +<p>Implementation may be inferred from the <a href="http://w3c.github.io/webrtc-pc/">specification</a>.</p> + +<p>This remainder of this page contains outdated information as <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1119285">noted on bugzilla</a>.</p> + +<h3 id="Shims">Shims</h3> + +<p>As you can imagine, with such an early API, you must use the browser prefixes and shim it to a common variable.</p> + +<pre class="brush: js notranslate">var RTCPeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; +var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate; +var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; +navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;</pre> + +<h3 id="RTCPeerConnection_2">RTCPeerConnection</h3> + +<p>This is the starting point to creating a connection with a peer. It accepts configuration options about ICE servers to use to establish a connection.</p> + +<pre class="brush: js notranslate">var pc = new RTCPeerConnection(configuration);</pre> + +<h3 id="RTCConfiguration"><strong><code>RTCConfiguration</code></strong></h3> + +<p>The {{domxref("RTCConfiguration")}} object contains information about which TURN and/or STUN servers to use for ICE. This is required to ensure most users can actually create a connection by avoiding restrictions in NAT and firewalls.</p> + +<pre class="brush: js notranslate">var configuration = { + iceServers: [ + {urls: "stun:23.21.150.121"}, + {urls: "stun:stun.l.google.com:19302"}, + {urls: "turn:numb.viagenie.ca", credential: "webrtcdemo", username: "louis%40mozilla.com"} + ] +}</pre> + +<p>Google runs a <a href="https://code.google.com/p/natvpn/source/browse/trunk/stun_server_list">public STUN server</a> that we can use. I also created an account at http://numb.viagenie.ca/ for a free TURN server to access. You may want to do the same and replace with your own credentials.</p> + +<h3 id="ICECandidate">ICECandidate</h3> + + + +<p>After creating the PeerConnection and passing in the available <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_STUN.3F">STUN</a> and <a href="/en-US/docs/Web/Guide/API/WebRTC/WebRTC_architecture#What_is_TURN.3F">TURN</a> servers, an event will be fired once the ICE framework has found some “candidates” that will allow you to connect with a peer. This is known as an ICE Candidate and will execute a callback function on <a href="/en-US/docs/Web/API/RTCPeerConnection.onicecandidate">PeerConnection#onicecandidate</a>.</p> + +<pre class="brush: js notranslate" lang="javascript">pc.onicecandidate = function (e) { + // candidate exists in e.candidate + if (!e.candidate) return; + send("icecandidate", JSON.stringify(e.candidate)); +};</pre> + +<p>When the callback is executed, we must use the signal channel to send the Candidate to the peer. On Chrome, multiple ICE candidates are usually found, we only need one so I typically send the first one then remove the handler. Firefox includes the Candidate in the Offer SDP.</p> + +<h3 id="Signal_Channel">Signal Channel</h3> + +<p>Now that we have an ICE candidate, we need to send that to our peer so they know how to connect with us. However this leaves us with a chicken and egg situation; we want PeerConnection to send data to a peer but before that we need to send them metadata…</p> + +<p>This is where the signal channel comes in. It’s any method of data transport that allows two peers to exchange information. In this article, we’re going to use <a href="http://firebase.com">FireBase</a> because it’s incredibly easy to setup and doesn't require any hosting or server-code.</p> + +<p>For now just imagine two methods exist: <code>send()</code> will take a key and assign data to it and <code>recv()</code> will call a handler when a key has a value.</p> + +<p>The structure of the database will look like this:</p> + +<pre class="brush: js notranslate" lang="json">{ + "": { + "candidate:": … + "offer": … + "answer": … + } +}</pre> + +<p>Connections are divided by a <code>roomId</code> and will store 4 pieces of information, the ICE candidate from the offerer, the ICE candidate from the answerer, the offer SDP and the answer SDP.</p> + +<h3 id="Offer">Offer</h3> + +<p>An Offer SDP (Session Description Protocol) is metadata that describes to the other peer the format to expect (video, formats, codecs, encryption, resolution, size, etc etc).</p> + +<p>An exchange requires an offer from a peer, then the other peer must receive the offer and provide back an answer.</p> + +<pre class="brush: js notranslate" lang="javascript">pc.createOffer(function (offer) { + pc.setLocalDescription(offer, function() { + send("offer", JSON.stringify(pc.localDescription); + }, errorHandler); +}, errorHandler, options);</pre> + +<h4 id="errorHandler"><strong><code>errorHandler</code></strong></h4> + +<p>If there was an issue generating an offer, this method will be executed with error details as the first argument.</p> + +<pre class="brush: js notranslate" lang="javascript">var errorHandler = function (err) { + console.error(err); +};</pre> + +<h5 id="options"><strong><code>options</code></strong></h5> + +<p>Options for the offer SDP.</p> + +<pre class="brush: js notranslate" lang="javascript">var options = { + offerToReceiveAudio: true, + offerToReceiveVideo: true +};</pre> + +<p><code>offerToReceiveAudio/Video</code> tells the other peer that you would like to receive video or audio from them. This is not needed for DataChannels.</p> + +<p>Once the offer has been generated we must set the local SDP to the new offer and send it through the signal channel to the other peer and await their Answer SDP.</p> + +<h3 id="Answer">Answer</h3> + +<p>An Answer SDP is just like an offer but a response; sort of like answering the phone. We can only generate an answer once we have received an offer.</p> + +<pre class="brush: js notranslate" lang="javascript">recv("offer", function (offer) { + offer = new SessionDescription(JSON.parse(offer)) + pc.setRemoteDescription(offer); + + pc.createAnswer(function (answer) { + pc.setLocalDescription(answer, function() { + send("answer", JSON.stringify(pc.localDescription)); + }, errorHandler); + }, errorHandler); +});</pre> + +<h3 id="DataChannel">DataChannel</h3> + +<p>I will first explain how to use PeerConnection for the DataChannels API and transferring arbitrary data between peers.</p> + +<p><em>Note: At the time of this article, interoperability between Chrome and Firefox is not possible with DataChannels. Chrome supports a similar but private protocol and will be supporting the standard protocol soon.</em></p> + +<pre class="brush: js notranslate" lang="javascript">var channel = pc.createDataChannel(channelName, channelOptions);</pre> + +<p>The offerer should be the peer who creates the channel. The answerer will receive the channel in the callback <code>ondatachannel</code> on PeerConnection. You must call <code>createDataChannel()</code> once before creating the offer.</p> + +<h4 id="channelName"><strong><code>channelName</code></strong></h4> + +<p>This is a string that acts as a label for your channel name. <em>Warning: Make sure your channel name has no spaces or Chrome will fail on <code>createAnswer()</code>.</em></p> + +<h4 id="channelOptions"><strong><code>channelOptions</code></strong></h4> + +<pre class="brush: js notranslate" lang="javascript">var channelOptions = {};</pre> + +<p>Currently these options are not well supported on Chrome so you can leave this empty for now. Check the <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html#attributes-7">RFC</a> for more information about the options.</p> + +<h4 id="Channel_Events_and_Methods">Channel Events and Methods</h4> + +<h5 id="onopen"><strong><code>onopen</code></strong></h5> + +<p>Executed when the connection is established.</p> + +<h5 id="onerror"><strong><code>onerror</code></strong></h5> + +<p>Executed if there is an error creating the connection. First argument is an error object.</p> + +<pre class="brush: js notranslate" lang="javascript">channel.onerror = function (err) { + console.error("Channel Error:", err); +};</pre> + +<h5 id="onmessage"><strong><code>onmessage</code></strong></h5> + +<pre class="brush: js notranslate" lang="javascript">channel.onmessage = function (e) { + console.log("Got message:", e.data); +}</pre> + +<p>The heart of the connection. When you receive a message, this method will execute. The first argument is an event object which contains the data, time received and other information.</p> + +<h5 id="onclose"><strong><code>onclose</code></strong></h5> + +<p>Executed if the other peer closes the connection.</p> + +<h4 id="Binding_the_Events"><strong>Binding the Events</strong></h4> + +<p>If you were the creator of the channel (meaning the offerer), you can bind events directly to the DataChannel you created with <code>createChannel</code>. If you are the answerer, you must use the <code>ondatachannel</code> callback on PeerConnection to access the same channel.</p> + +<pre class="brush: js notranslate" lang="javascript">pc.ondatachannel = function (e) { + e.channel.onmessage = function () { … }; +};</pre> + +<p>The channel is available in the event object passed into the handler as <code>e.channel</code>.</p> + +<h5 id="send"><strong><code>send()</code></strong></h5> + +<pre class="brush: js notranslate" lang="javascript">channel.send("Hi Peer!");</pre> + +<p>This method allows you to send data directly to the peer! Amazing. You must send either String, Blob, ArrayBuffer or ArrayBufferView, so be sure to stringify objects.</p> + +<h5 id="close"><strong><code>close()</code></strong></h5> + +<p>Close the channel once the connection should end. It is recommended to do this on page unload.</p> + +<h3 id="Media">Media</h3> + +<p>Now we will cover transmitting media such as audio and video. To display the video and audio you must include a <code><video></code> tag on the document with the attribute <code>autoplay</code>.</p> + +<h4 id="Get_User_Media">Get User Media</h4> + +<pre class="brush: js notranslate"><video id="preview" autoplay></video> + +var video = document.getElementById("preview"); +navigator.getUserMedia(constraints, function (stream) { + video.src = URL.createObjectURL(stream); +}, errorHandler);</pre> + +<p><strong><code>constraints</code></strong></p> + +<p>Constraints on what media types you want to return from the user.</p> + +<pre class="brush: js notranslate" lang="javascript">var constraints = { + video: true, + audio: true +};</pre> + +<p>If you just want an audio chat, remove the <code>video</code> member.</p> + +<h5 id="errorHandler_2"><strong><code>errorHandler</code></strong></h5> + +<p>Executed if there is an error returning the requested media.</p> + +<h4 id="Media_Events_and_Methods">Media Events and Methods</h4> + +<h5 id="addStream"><strong><code>addStream</code></strong></h5> + +<p>Add the stream from <code>getUserMedia</code> to the PeerConnection.</p> + +<pre class="brush: js notranslate" lang="javascript">pc.addStream(stream);</pre> + +<h5 id="onaddstream"><strong><code>onaddstream</code></strong></h5> + +<pre class="brush: js notranslate"><video id="otherPeer" autoplay></video> + +var otherPeer = document.getElementById("otherPeer"); +pc.onaddstream = function (e) { + otherPeer.src = URL.createObjectURL(e.stream); +};</pre> + +<p>Executed when the connection has been setup and the other peer has added the stream to the peer connection with <code>addStream</code>. You need another <code><video></code> tag to display the other peer's media.</p> + +<p>The first argument is an event object with the other peer's media stream.</p> diff --git a/files/ru/conflicting/web/api/window/localstorage/index.html b/files/ru/conflicting/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..f0fab82609 --- /dev/null +++ b/files/ru/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,146 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +--- +<p><code>localStorage</code> это аналог <code><a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a></code>, с некоторыми same-origin правилами, но значения хранятся постоянно (в отличии от sessions). <code>localStorage</code> появился в Firefox 3.5.</p> + +<div class="note"><strong>Примечание:</strong> Когда браузер переходит в режим приватного просмотра, создается новое временное хранилище. Изначально оно пустое. После выхода из режима приватного просмотра временное хранилище очищается.</div> + +<pre class="brush:js" style="font-size: 14px;">// Сохраняет данные в текущий local store +localStorage.setItem("username", "John"); + +// Извлекает ранее сохраненные данные +alert( "username = " + localStorage.getItem("username"));</pre> + +<p class="note"><code>localStorage</code>'s позволяет постоянно хранить некоторую полезную информацию, включая счетчики посещения страницы, как показано в примере <a href="http://codepen.io/awesom3/pen/Hlfma">this tutorial on Codepen</a>.</p> + +<h4 id="Совместимость" style="line-height: 18px; font-size: 1.28571428571429rem;">Совместимость</h4> + +<p><code>Storage</code> objects недавно добавлен в стандарт. Он может отсутствовать в некоторых браузерах. Вы можете работать с этой технологией добавив в страницу один из двух скриптов, которые представлены ниже. <code>localStorage</code> object реализуется програмно, если нет встроенной реализации.</p> + +<p>Этот алгоритм является точной имитацией <code>localStorage</code> object, но для хранения использует cookies.</p> + +<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "clear", { + value: function () { + if(!aKeys.length) { return; } + for (var sKey in aKeys) { + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + } + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> + +<div class="note"><strong>Примечание:</strong> Максимальныйe размер данных, которые могут быть сохранены, ограничен возможностями cookies. Используйте functions <code>localStorage.setItem()</code> и <code>localStorage.removeItem()</code> для добавления, изменения, или удаления ключа. Использование прямого присвоения <code>localStorage.yourKey = yourValue;</code> и <code>delete localStorage.yourKey;</code> для установки и удаления ключа <strong>не безопасно с этим кодом</strong>. Вы также можете изменить это имя (вместо window.localStorage прописать другое имя) и использовать объект для управления document's cookies, не обращая внимания на localStorage object.</div> + +<div class="note"><strong>Примечание:</strong> Если изменить строку <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> на: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (и изменить имя объекта), он превратится в <code>sessionStorage</code> polyfill больше, чем в <code>localStorage</code> polyfill. Однако эта реализация будет хранить общие значения для всех вкладок и окон браузера (and will only be cleared when all browser windows have been closed), в то время как полностью совместимая <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> реализация хранит значения</span><span style="line-height: 1.5em;"> to the current browsing context only.</span></div> + +<p>Here is another, less exact, imitation of the <code>localStorage</code> object. It is simpler than the previous one, but it is compatible with old browsers, like Internet Explorer < 8 (<strong>tested and working even in Internet Explorer 6</strong>). It also makes use of cookies.</p> + +<pre class="brush:js" style="font-size: 14px;">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> + +<div class="note"><strong>Note:</strong> The maximum size of data that can be saved is severely restricted by the use of cookies. With this algorithm, use the functions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, and <code>localStorage.removeItem()</code> to get, add, change, or remove a key. The use of method <code>localStorage.yourKey</code> in order to get, set, or delete a key <strong>is not permitted with this code</strong>. You can also change its name and use it only to manage a document's cookies regardless of the localStorage object.</div> + +<div class="note"><strong>Note:</strong> By changing the string <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> to: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (and changing the object's name), this will become a <code>sessionStorage</code> polyfill rather than a <code>localStorage</code> polyfill. However, this implementation will share stored values across browser tabs and windows (and will only be cleared when all browser windows have been closed), while a fully-compliant <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> implementation restricts stored values to the current browsing context only.</span></div> + +<h4 id="Compatibility_and_relation_with_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibility and relation with globalStorage</h4> + +<p class="note"><code>localStorage</code> is also the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code> which is covered below. For example, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard so you shouldn't rely on these.</p> + +<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items; only extending <code>StorageObsolete.prototype</code> does.</p> + +<h4 id="Storage_format">Storage format</h4> + +<p><code>Storage</code> keys and values are both stored in the UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a> format, which uses 2 bytes per character.</p> + +<p> </p> diff --git a/files/ru/conflicting/web/api/windoworworkerglobalscope/index.html b/files/ru/conflicting/web/api/windoworworkerglobalscope/index.html new file mode 100644 index 0000000000..f51b72c102 --- /dev/null +++ b/files/ru/conflicting/web/api/windoworworkerglobalscope/index.html @@ -0,0 +1,121 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowBase64 +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This helper neither defines nor inherits any properties.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This helper does not inherit any methods.</em></p> + +<dl> + <dt>{{domxref("WindowBase64.atob()")}}</dt> + <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> + <dt>{{domxref("WindowBase64.btoa()")}}</dt> + <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>10.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/ru/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/ru/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html new file mode 100644 index 0000000000..ac80f42b5f --- /dev/null +++ b/files/ru/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html @@ -0,0 +1,120 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML DOM +translation_of: Web/API/WindowOrWorkerGlobalScope +translation_of_original: Web/API/WindowTimers +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> + +<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> + +<h2 id="Properties">Properties</h2> + +<p><em>This interface do not define any property, nor inherit any.</em></p> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface do not inherit any method.</em></p> + +<dl> + <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> + <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> + <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> + <dt>{{domxref("WindowTimers.setInterval()")}}</dt> + <dd>Schedules the execution of a function each X milliseconds.</dd> + <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> + <dd>Sets a delay for executing a function.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(1)}}</td> + <td>1.0</td> + <td>4.0</td> + <td>4.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoMobile(1)}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> +</ul> diff --git a/files/ru/conflicting/web/api/xmlhttprequest/index.html b/files/ru/conflicting/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..0de9dfed9d --- /dev/null +++ b/files/ru/conflicting/web/api/xmlhttprequest/index.html @@ -0,0 +1,282 @@ +--- +title: XMLHttpRequest +slug: XMLHttpRequest +tags: + - AJAX + - XMLHttpRequest +--- +<p><code>XMLHttpRequest</code> — это объект <a href="/ru/JavaScript" title="ru/JavaScript">JavaScript</a>, созданный Microsoft и адаптированный Mozilla. Вы можете использовать его для простой передачи данных через HTTP. Несмотря на свое название, он может быть использован не только для XML документов, но и, например, для <a href="/ru/JSON" title="ru/JSON">JSON</a>.</p> + +<p>Оставшаяся часть статьи может содержать информацию, специфичную для <a href="/ru/Gecko" title="ru/Gecko">Gecko</a> или привилегированного кода, такого как дополнения.</p> + +<p>В Gecko этот объект реализует интерфейсы <code><a href="/ru/NsIJSXMLHttpRequest" title="ru/NsIJSXMLHttpRequest">nsIJSXMLHttpRequest</a></code> и <code><a href="/ru/NsIXMLHttpRequest" title="ru/NsIXMLHttpRequest">nsIXMLHttpRequest</a></code>. Недавние версии Gecko содержат некоторые изменения для этого объекта (см. <a href="/ru/XMLHttpRequest_changes_for_Gecko1.8" title="ru/XMLHttpRequest_changes_for_Gecko1.8">XMLHttpRequest changes for Gecko1.8</a>).</p> + +<h3 id=".D0.9E.D1.81.D0.BD.D0.BE.D0.B2.D1.8B_.D0.B8.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D1.8F" name=".D0.9E.D1.81.D0.BD.D0.BE.D0.B2.D1.8B_.D0.B8.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D1.8F">Основы использования</h3> + +<p>Использовать <code>XMLHttpRequest</code> очень просто. Вы создаёте экземпляр объекта, открываете URL и отправляете запрос. Статус HTTP-ответа, так же как и возвращаемый документ, доступны в свойствах объекта запроса.</p> + +<div class="note"><strong>Замечание: </strong>Версии Firefox до версии 3 постоянно отправляют запрос, используя кодировку UTF-8. Отправляя документ, Firefox 3 использует кодировку, определенную в <code>data.inputEncoding</code> (где <code>data — </code>ненулевой объект, переданный в <code>send()</code>). Если не определено, то используется UTF-8.</div> + +<h4 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80">Пример</h4> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', false); +req.send(null); +if(req.status == 200) + dump(req.responseText); +</pre> + +<div class="note"><strong>Замечание:</strong> Этот пример работает синхронно, то есть он заблокирует интерфейс пользователя, если вы вызовете его из своего кода. Не рекомендуется использовать это на практике.</div> + +<h4 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80_.D0.B1.D0.B5.D0.B7_http_.D0.BF.D1.80.D0.BE.D1.82.D0.BE.D0.BA.D0.BE.D0.BB.D0.B0" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80_.D0.B1.D0.B5.D0.B7_http_.D0.BF.D1.80.D0.BE.D1.82.D0.BE.D0.BA.D0.BE.D0.BB.D0.B0">Пример без http протокола</h4> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'file:///home/user/file.json', false); +req.send(null); +if(req.status == 0) + dump(req.responseText); +</pre> + +<div class="note"><strong>Замечание:</strong> file:/// и ftp:// не возвращают HTTP статуса, вот почему они возвращают ноль в <code>status</code> и пустую строчку в <code>statusText</code>. См. {{ Bug(331610) }} для подробной информации.</div> + +<h3 id=".D0.90.D1.81.D0.B8.D0.BD.D1.85.D1.80.D0.BE.D0.BD.D0.BD.D0.BE.D0.B5_.D0.B8.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5" name=".D0.90.D1.81.D0.B8.D0.BD.D1.85.D1.80.D0.BE.D0.BD.D0.BD.D0.BE.D0.B5_.D0.B8.D1.81.D0.BF.D0.BE.D0.BB.D1.8C.D0.B7.D0.BE.D0.B2.D0.B0.D0.BD.D0.B8.D0.B5">Асинхронное использование</h3> + +<p>Если вы собираетесь использовать <code>XMLHttpRequest</code> из дополнения, вы должны позволить ему загружаться асинхронно. Во время асинхронного использования вы получаете отзыв после загрузки данных, что позволяет браузеру продолжать работу пока ваш запрос обрабатывается.</p> + +<h4 id=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80_2" name=".D0.9F.D1.80.D0.B8.D0.BC.D0.B5.D1.80_2">Пример</h4> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', true); /* Третий аргумент true означает асинхронность */ +req.onreadystatechange = function (aEvt) { + if (req.readyState == 4) { + if(req.status == 200) + dump(req.responseText); + else + dump("Error loading page\n"); + } +}; +req.send(null); +</pre> + +<h4 id=".D0.9D.D0.B0.D0.B1.D0.BB.D1.8E.D0.B4.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B7.D0.B0_.D0.BF.D1.80.D0.BE.D0.B3.D1.80.D0.B5.D1.81.D1.81.D0.BE.D0.BC" name=".D0.9D.D0.B0.D0.B1.D0.BB.D1.8E.D0.B4.D0.B5.D0.BD.D0.B8.D0.B5_.D0.B7.D0.B0_.D0.BF.D1.80.D0.BE.D0.B3.D1.80.D0.B5.D1.81.D1.81.D0.BE.D0.BC">Наблюдение за прогрессом</h4> + +<p><code>XMLHttpRequest</code> предоставляет возможность отлавливать некоторые события которые могут возникнуть во время обработки запроса. Включая периодические уведомления о прогрессе, сообщения об ошибках и так далее.</p> + +<p>Если к примеру вы желаете предоставить информацию пользователю о прогрессе получения документа, вы можете использовать код вроде этого:</p> + +<pre>function onProgress(e) { + var percentComplete = (e.position / e.totalSize)*100; + ... +} + +function onError(e) { + alert("Error " + e.target.status + " occurred while receiving the document."); +} + +function onLoad(e) { + // ... +} +// ... +var req = new XMLHttpRequest(); +req.onprogress = onProgress; +req.open("GET", url, true); +req.onload = onLoad; +req.onerror = onError; +req.send(null); +</pre> + +<p>Атрибуты события <code>onprogress</code>: <code>position</code> и <code>totalSize</code>, отображают соотвественно текущие количество принятых байтов и количество ожидаемых байтов.</p> + +<p>Все эти события имеют свои <code>target</code> атрибуты установленные в соответствии с <code>XMLHttpRequest</code>.</p> + +<div class="note"><strong>Замечание:</strong> <a href="/ru/Firefox_3" title="ru/Firefox_3">Firefox 3</a> по сути обеспечивает установку значений-ссылок полей <code>target</code>, <code>currentTarget</code> и <code>this</code> у объекта события на правильные объекты во время вызова обработчика событий для XML документов представленных в <code>XMLDocument</code>. См. {{ Bug(198595) }} для деталей.</div> + +<h3 id=".D0.94.D1.80.D1.83.D0.B3.D0.B8.D0.B5_.D0.A1.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2.D0.B0_.D0.B8_.D0.9C.D0.B5.D1.82.D0.BE.D0.B4.D1.8B" name=".D0.94.D1.80.D1.83.D0.B3.D0.B8.D0.B5_.D0.A1.D0.B2.D0.BE.D0.B9.D1.81.D1.82.D0.B2.D0.B0_.D0.B8_.D0.9C.D0.B5.D1.82.D0.BE.D0.B4.D1.8B">Другие Свойства и Методы</h3> + +<p>В дополнение к свойствам и методам описанным выше, ниже следуют другие полезные свойства и методы для объекта запроса.</p> + +<h4 id="responseXML" name="responseXML">responseXML</h4> + +<p>Если вы загрузили <a href="/ru/XML" title="ru/XML">XML</a> документ свойство <code>responseXML</code> будет содержать документ в виде <code>XmlDocument</code> объекта которым вы можете манипулировать используя DOM методы. Если сервер отправляет правильно сформированные XML документы но не устанавливает Content-Type заголовок для него, вы можете использовать <code><a href="/ru/XMLHttpRequest#overrideMimeType.28.29" title="ru/XMLHttpRequest#overrideMimeType.28.29">overrideMimeType()</a></code> для того чтобы документ был обработан как XML. Если сервер не отправляет правильно сформированного документа XML, <code>responseXML</code> вернет null независимо от любых перезаписей Content-Type заголовка.</p> + +<h4 id="overrideMimeType.28.29" name="overrideMimeType.28.29">overrideMimeType()</h4> + +<p>Этот метод может быть использован для обработки документа особенным образом. Обычно вы будете использовать его, когда запросите <code>responseXML,</code> и сервер отправит вам <a href="/ru/XML" title="ru/XML">XML</a>, но не отправит правильного Content-Type заголовка.</p> + +<div class="note"><strong>Замечание:</strong> Этот метод должен вызываться до вызова <code>send()</code>.</div> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', true); +req.overrideMimeType('text/xml'); +req.send(null); +</pre> + +<h4 id="setRequestHeader.28.29" name="setRequestHeader.28.29">setRequestHeader()</h4> + +<p>Этот метод может быть использован чтобы установить HTTP заголовок в запросе до его отправки.</p> + +<div class="note"><strong>Замечание:</strong> Вы должны вызвать вначале <code>open()</code>.</div> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', true); +req.setRequestHeader("X-Foo", "Bar"); +req.send(null); +</pre> + +<h4 id="getResponseHeader.28.29" name="getResponseHeader.28.29">getResponseHeader()</h4> + +<p>Этот метод может быть использован для получения HTTP заголовка из ответа сервера.</p> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', false); +req.send(null); +dump("Content-Type: " + req.getResponseHeader("Content-Type") + "\n"); +</pre> + +<h4 id="abort.28.29" name="abort.28.29">abort()</h4> + +<p>Этот метод может быть использован чтобы отменить обрабатываемый запрос.</p> + +<pre>var req = new XMLHttpRequest(); +req.open('GET', 'http://www.mozilla.org/', false); +req.send(null); +req.abort(); +</pre> + +<h4 id="mozBackgroundRequest" name="mozBackgroundRequest">mozBackgroundRequest</h4> + +<p>Это свойство может быть использовано чтобы уберечь от всплытия аутентификации и неправильных диалогов сертификации в ответ на запрос. Также запрос не будет отменен при закрытии его окна, которому он принадлежит. Это свойство работает только для кода chrome. {{ Fx_minversion_inline(3) }}</p> + +<pre>var req = new XMLHttpRequest(); +req.mozBackgroundRequest = true; +req.open('GET', 'http://www.mozilla.org/', true); +req.send(null); +</pre> + +<h3 id="Using_from_XPCOM_components" name="Using_from_XPCOM_components">Using from XPCOM components</h3> + +<div class="note"><strong>Note:</strong> Changes are required if you use XMLHttpRequest from a JavaScript XPCOM component.</div> + +<p>XMLHttpRequest cannot be instantiated using the <code>XMLHttpRequest()</code> constructor from a JavaScript XPCOM component. The constructor is not defined inside components and the code results in an error. You'll need to create and use it using a different syntax.</p> + +<p>Instead of this:</p> + +<pre>var req = new XMLHttpRequest(); +req.onprogress = onProgress; +req.onload = onLoad; +req.onerror = onError; +req.open("GET", url, true); +req.send(null); +</pre> + +<p>Do this:</p> + +<pre>var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] + .createInstance(Components.interfaces.nsIXMLHttpRequest); +req.onprogress = onProgress; +req.onload = onLoad; +req.onerror = onError; +req.open("GET", url, true); +req.send(null); +</pre> + +<p>For C++ code you would need to QueryInterface the component to an <code>nsIEventTarget</code> in order to add event listeners, but chances are in C++ using a channel directly would be better.</p> + +<h3 id="Limited_number_of_simultaneous_XMLHttpRequest_connections" name="Limited_number_of_simultaneous_XMLHttpRequest_connections">Limited number of simultaneous XMLHttpRequest connections</h3> + +<p>The about:config preference: network.http.max-persistent-connections-per-server limits the number of connections. In Firefox 3 this value is 6 by default, previous versions use 2 as the default. Some interactive web pages using xmlHttpRequest may keep a connection open. Opening two or three of these pages in different tabs or on different windows may cause the browser to hang in such a way that the window no longer repaints and browser controls don't respond.</p> + +<h3 id="Binary_Content" name="Binary_Content">Binary Content</h3> + +<p>Although less typical than sending/receiving character-oriented content, <code>XMLHttpRequest</code> can be used to send and receive binary content.</p> + +<h4 id="Retrieving_binary_content" name="Retrieving_binary_content">Retrieving binary content</h4> + +<pre>// Fetches BINARY FILES synchronously using XMLHttpRequest +function load_binary_resource(url) { + var req = new XMLHttpRequest(); + req.open('GET', url, false); + //XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com] + req.overrideMimeType('text/plain; charset=x-user-defined'); + req.send(null); + if (req.status != 200) return ''; + return req.responseText; +} + +var filestream = load_binary_resource(url); +// x is the offset (i.e. position) of the byte in the returned binary file stream. The valid range for x is from 0 up to filestream.length-1. +var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7) +</pre> + +<p>See <a class="external" href="http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html">downloading binary streams with XMLHttpRequest</a> for a detailed explanation. See also <a href="/ru/Code_snippets/Downloading_Files" title="ru/Code_snippets/Downloading_Files">downloading files</a>.</p> + +<h4 id="Sending_binary_content" name="Sending_binary_content">Sending binary content</h4> + +<p>This example POSTs binary content asynchronously. aBody is some data to send.</p> + +<pre class="eval"> var req = new XMLHttpRequest(); + req.open("POST", url, true); + // set headers and mime-type appropriately + req.setRequestHeader("Content-Length", 741); + req.sendAsBinary(aBody); +</pre> + +<p>You can also send binary content by passing an instance of interface <a href="/ru/NsIFileInputStream" title="ru/NsIFileInputStream">nsIFileInputStream</a> to <code>req.send()</code>. In that case, there is not need to set the Content-Length request header:</p> + +<pre>// Make a stream from a file. The file variable holds an nsIFile +var stream = Components.classes["@mozilla.org/network/file-input-stream;1"] + .createInstance(Components.interfaces.nsIFileInputStream); +stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsIFile instance + +// Try to determine the MIME type of the file +var mimeType = "text/plain"; +try { + var mimeService = Components.classes["@mozilla.org/mime;1"].getService(Components.interfaces.nsIMIMEService); + mimeType = mimeService.getTypeFromFile(file); // file is an nsIFile instance +} +catch(e) { /* eat it; just use text/plain */ } + +// Send +var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] + .createInstance(Components.interfaces.nsIXMLHttpRequest); +req.open('PUT', url, false); /* synchronous! */ +req.setRequestHeader('Content-Type', mimeType); +req.send(stream); +</pre> + +<h3 id="Bypassing_cache" name="Bypassing_cache">Bypassing cache</h3> + +<p>Normally, <code>XMLHttpRequest</code> attempts to retrieve content from local cache. To bypass this attempt, do the following:</p> + +<pre class="eval"> var req = new XMLHttpRequest(); + req.open('GET', url, false); + <strong>req.channel.loadFlags |= Components.interfaces.nsIRequest.LOAD_BYPASS_CACHE;</strong> + req.send(null); +</pre> + +<p>An alternative approach to bypassing cache, as described <a class="external" href="http://mozdev.org/pipermail/project_owners/2006-August/008353.html">here</a>:</p> + +<pre class="eval"> var req = new XMLHttpRequest(); + req.open("GET", url += (url.match(/\?/) == null ? "?" : "&") + (new Date()).getTime(), false); + req.send(null); +</pre> + +<p>This appends a timestamp URL parameter to the URL, taking care to insert a ? or & as appropriate. For example, <a class="external" href="http://foo.com/bar.html" rel="freelink">http://foo.com/bar.html</a> becomes <a class="external" href="http://foo.com/bar.html?12345" rel="freelink">http://foo.com/bar.html?12345</a> and <a class="external" href="http://foo.com/bar.html?foobar=baz" rel="freelink">http://foo.com/bar.html?foobar=baz</a> becomes <a class="external" href="http://foo.com/bar.html?foobar=baz&12345" rel="freelink">http://foo.com/bar.html?foobar=baz&12345</a>. Since local cache is indexed by URL, the idea is that every URL used by XMLHttpRequest is unique, bypassing the cache.</p> + +<h3 id="Downloading_JSON_and_JavaScript_in_extensions" name="Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</h3> + +<p>Extensions shouldn't use <a href="/ru/Core_JavaScript_1.5_Reference/Functions/eval" title="ru/Core_JavaScript_1.5_Reference/Functions/eval">eval()</a> on JSON or JavaScript downloaded from the web. See <a href="/ru/Downloading_JSON_and_JavaScript_in_extensions" title="ru/Downloading_JSON_and_JavaScript_in_extensions">Downloading JSON and JavaScript in extensions</a> for details.</p> + +<h3 id="References" name="References">References</h3> + +<ol> + <li><a href="/ru/AJAX/Getting_Started" title="ru/AJAX/Getting_Started">MDC AJAX introduction</a></li> + <li><a class="external" href="http://www.peej.co.uk/articles/rich-user-experience.html">XMLHttpRequest - REST and the Rich User Experience</a></li> + <li><a class="external" href="http://www.xulplanet.com/references/objref/XMLHttpRequest.html">XULPlanet documentation</a></li> + <li><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk/html/xmobjxmlhttprequest.asp">Microsoft documentation</a></li> + <li><a class="external" href="http://developer.apple.com/internet/webcontent/xmlhttpreq.html">Apple developers' reference</a></li> + <li><a class="external" href="http://jibbering.com/2002/4/httprequest.html">"Using the XMLHttpRequest Object" (jibbering.com)</a></li> + <li><a class="external" href="http://www.w3.org/TR/XMLHttpRequest/">The XMLHttpRequest Object: W3C Working Draft</a></li> +</ol> + +<p>{{ languages( { "es": "es/XMLHttpRequest", "fr": "fr/XMLHttpRequest", "it": "it/XMLHttpRequest", "ja": "ja/XMLHttpRequest", "ko": "ko/XMLHttpRequest", "pl": "pl/XMLHttpRequest", "zh-cn": "cn/XMLHttpRequest" } ) }}</p> |