googlechrome
/
samples
зеркало из https://github.com/GoogleChrome/samples.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Added Block modal dialogs in a sandboxed iframe Sample

This commit is contained in:
Francois Beaufort 2015-07-27 17:50:22 +02:00
Родитель 41aa9824d4
Коммит 121bb154ff
3 изменённых файлов: 81 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

5
block-modal-dialogs-sandboxed-iframe/README.md Executable file
Просмотреть файл

@ -0,0 +1,5 @@
Block modal dialogs inside a sandboxed iframe Sample
====================================================
See https://googlechrome.github.io/samples/block-modal-dialogs-sandboxed-iframe/index.html for a live demo.
Learn more at https://www.chromestatus.com/feature/4747009953103872

30
block-modal-dialogs-sandboxed-iframe/iframe.html Normal file
Просмотреть файл

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<body>
<button id="alert">window.alert("Hello")</button>
<button id="confirm">window.confirm("Hello")</button>
<button id="print">window.print()</button>
<button id="prompt">window.prompt("Hello")</button>
<script>
document.querySelector('#alert').addEventListener('click', event => {
alert('Hello');
});
document.querySelector('#confirm').addEventListener('click', event => {
confirm('Hello');
});
document.querySelector('#prompt').addEventListener('click', event => {
prompt('Hello');
});
document.querySelector('#print').addEventListener('click', event => {
print();
});
</script>
<style>
button { display: block; margin-bottom: 6px; }
</style>
</body>
</html>

46
block-modal-dialogs-sandboxed-iframe/index.html Executable file
Просмотреть файл

@ -0,0 +1,46 @@
---
feature_name: Block modal dialogs in a sandboxed iframe
chrome_version: 46
feature_id: 4747009953103872
---
<p>From now on, <b>sandboxed frames will block modal dialogs by default</b> to
prevent them from popping up confusing, modal messages to users. This includes the infamous
<code>window.alert()</code>, <code>window.confirm()</code>,
<code>window.print()</code> and <code>window.prompt()</code>.</p>
<p>However if you really (really) want to allow modal dialogs inside a sandboxed
frame, you can still add <code>"allow-modals"</code> to its
<code>"sandbox"</code> attribute.</p>
{% capture html %}
<!-- No sandbox there... Modal dialogs will pop up -->
<iframe id="red" src="iframe.html"></iframe>
<!-- Sandbox frame will execute javascript but block modal dialogs -->
<iframe id="green" src="iframe.html" sandbox="allow-scripts"></iframe>
<!-- Sandbox frame will execute javascript and show modal dialogs -->
<iframe id="blue" src="iframe.html"
sandbox="allow-scripts allow-modals"></iframe>
{% endcapture %}
{% include html_snippet.html html=html title='' %}
<style>
iframe {
width: 259px;
border-color: #F44336;
background-color: #FFCDD2;
border-radius: 2px;
}
iframe[sandbox="allow-scripts"] {
border-color: #4CAF50;
background-color: #C8E6C9;
}
iframe[sandbox="allow-scripts allow-modals"] {
border-color: #2196F3;
background-color: #BBDEFB;
}
</style>