国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Chromium 新的彈窗機(jī)制以及 HTML 的 <dialog> 元素

philadelphia / 3611人閱讀

摘要：在隨后的版本中，團(tuán)隊(duì)一直在修改原生彈窗的表現(xiàn)。所以這種原生彈窗的最大用處不是用來(lái)提示用戶信息，而是傷害用戶。團(tuán)隊(duì)在中移除了對(duì)彈窗的支持。獲取用戶輸入可以用中的元素。作為的元素，目前除了和以外，其它瀏覽器均未支持。

自 1995 年 JavaScript 誕生之初，就包含了 3 個(gè)方法 alert()、confirm() 和 prompt()。在隨后的 Chrome 版本中，Chrome 團(tuán)隊(duì)一直在修改原生彈窗的表現(xiàn)。

但是這種阻斷式的彈窗總被各種廣告網(wǎng)站惡意使用，因?yàn)橹灰獜棿俺霈F(xiàn)，JavaScript 引擎就會(huì)一直等待，知道用戶操作。所以這種原生彈窗的最大用處不是用來(lái)提示用戶信息，而是傷害用戶(Tech support scammers use subdomain trick to defeat blocking)。

因此 Chromium 團(tuán)隊(duì)強(qiáng)烈建議你不要使用這類彈窗。

而彈窗和 onbeforeunload 事件相結(jié)合之后那簡(jiǎn)直就是大殺器，而此類彈窗經(jīng)常被用來(lái)提示瀏覽者xxxx。

Chromium 團(tuán)隊(duì)在 Chrome 51 中移除了對(duì) onbeforeunload 彈窗的支持。在此之前 Safari 9.1 和 Firefox 4 早就已經(jīng)移除了。當(dāng)我們?cè)?onbeforeunload 事件中調(diào)用 alert 時(shí)，會(huì)在 devtools 中產(chǎn)生警告：

Blocked alert("before unload") during beforeunload.

除此之外，alert()、confirm()、prompt() 的行為也做了改變，不再作為頂級(jí)的原生彈窗而存在，當(dāng)彈窗所在的瀏覽器標(biāo)簽被切走后，它們會(huì)自動(dòng)消失。(Safari 9.1 說(shuō)：“你怎么到現(xiàn)在才來(lái)學(xué)啊！”)

Chromium 在官方博客中說(shuō)到：

對(duì)于 alert()/confirm()/prompt() 我們有很多替代的選擇。 譬如需要彈個(gè)通知消息時(shí)（日歷應(yīng)用）可以用Notifications API。 獲取用戶輸入可以用 HTML 中的 
 元素。 對(duì)于 XSS proofs-of-concept 則可用 console.log(document.origin)。

作為 HTML 5.2 的元素，目前除了 Chrome 和 Opara 以外，其它瀏覽器均未支持。但是 Google 提供了一個(gè) dialog-polyfill。

一個(gè)最簡(jiǎn)單的例子：

This is da dialog!

這段 html 什么也不顯示，開發(fā)者需要使用 javascript 的 API .show() 和 .close() 來(lái)控制 dialog 的顯示和隱藏。


  
This is da dialog!

  



var dialog = document.querySelector("dialog");

document.querySelector("#show").onclick = function() {
  dialog.show();
};

document.querySelector("#close").onclick = function() {
  dialog.close();
};

https://jsfiddle.net/m1dzstxo/

點(diǎn)擊按鈕會(huì)出現(xiàn)一個(gè)彈窗（非常丑）

不過(guò) dialog 作為一個(gè) html 標(biāo)簽，是可以使用 css 的。我們給它加一段 css 樣式：

dialog {
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

https://jsfiddle.net/m1dzstxo/1/

再點(diǎn)擊按鈕，彈窗了一個(gè)稍微漂亮點(diǎn)的彈窗：

我們還可以使用 .showModal() 彈窗一個(gè)模態(tài)對(duì)話框，當(dāng)我們關(guān)閉彈窗時(shí)觸發(fā) close 事件。我們還可以使用 ESC 鍵關(guān)閉一個(gè)彈窗，此時(shí)會(huì)觸發(fā) cancel 事件。和其它所有事件一樣，我們可以通過(guò)調(diào)用 event.preventDefault() 來(lái)阻止默認(rèn)行為。

直接彈窗一個(gè)模態(tài)窗口是不夠友好的，有時(shí)我們需要把背景虛化：

通過(guò)使用 CSS 的偽元素 ::backdrop 很容易就可以做到：

dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

為什么使用

元素而不是第三方的 javascript 庫(kù)？

我覺得兩者并不沖突，目前大部分 javascript 庫(kù)都是使用

來(lái)模擬彈窗，當(dāng)更多的瀏覽器開始支持 時(shí)，第三方的 javascript 庫(kù)也會(huì)考慮使用 作為首先的彈窗方式的，畢竟 是 HTML 5.2 規(guī)范中的。

相比

而言， 更大強(qiáng)大，也更加符合規(guī)范。比如 的模態(tài)彈窗可以保證即使全屏的情況下，彈窗可以保持在最頂層(top-layer)。top-layer 定義在 whatwg 的 Fullscreen API 中，可以配合偽元素 ::backdrop 以及偽類 :fullscreen 一起使用。

開發(fā)面向未來(lái)的前端，當(dāng)有 polyfill 方案時(shí)，我們應(yīng)該總是使用最新標(biāo)準(zhǔn)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/112171.html

相關(guān)文章

  • 阿里云前端周刊 - 第 14 期

    推薦 1. JavaScript 在嵌入式設(shè)備與物聯(lián)網(wǎng)中的應(yīng)用現(xiàn)狀 https://auth0.com/blog/javasc... 隨著近年來(lái) Web 的發(fā)展與 JavaScript 的崛起，JavaScript 被應(yīng)用到了許多原本不曾想象到的場(chǎng)景中，從服務(wù)端、工作站、數(shù)據(jù)庫(kù)、桌面環(huán)境到物聯(lián)網(wǎng)設(shè)備中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微...

    lewinlee 評(píng)論0 收藏0

  • 阿里云前端周刊 - 第 14 期

    推薦 1. JavaScript 在嵌入式設(shè)備與物聯(lián)網(wǎng)中的應(yīng)用現(xiàn)狀 https://auth0.com/blog/javasc... 隨著近年來(lái) Web 的發(fā)展與 JavaScript 的崛起，JavaScript 被應(yīng)用到了許多原本不曾想象到的場(chǎng)景中，從服務(wù)端、工作站、數(shù)據(jù)庫(kù)、桌面環(huán)境到物聯(lián)網(wǎng)設(shè)備中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微...

    buildupchao 評(píng)論0 收藏0

  • 阿里云前端周刊 - 第 14 期

    推薦 1. JavaScript 在嵌入式設(shè)備與物聯(lián)網(wǎng)中的應(yīng)用現(xiàn)狀 https://auth0.com/blog/javasc... 隨著近年來(lái) Web 的發(fā)展與 JavaScript 的崛起，JavaScript 被應(yīng)用到了許多原本不曾想象到的場(chǎng)景中，從服務(wù)端、工作站、數(shù)據(jù)庫(kù)、桌面環(huán)境到物聯(lián)網(wǎng)設(shè)備中，都可以見到 JavaScript 的身影。而本文則概括了 JavaScript 在不同的嵌入式微...

    trigkit4 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<