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

資訊專欄INFORMATION COLUMN

Chromium 新的彈窗機制以及 HTML 的 <dialog> 元素

philadelphia / 3626人閱讀

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

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

但是這種阻斷式的彈窗總被各種廣告網(wǎng)站惡意使用，因為只要彈窗出現(xiàn)，JavaScript 引擎就會一直等待，知道用戶操作。所以這種原生彈窗的最大用處不是用來提示用戶信息，而是傷害用戶(Tech support scammers use subdomain trick to defeat blocking)。

因此 Chromium 團隊強烈建議你不要使用這類彈窗。

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

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

Blocked alert("before unload") during beforeunload.

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

Chromium 在官方博客中說到：

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

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

一個最簡單的例子：

This is da dialog!

這段 html 什么也不顯示，開發(fā)者需要使用 javascript 的 API .show() 和 .close() 來控制 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/

點擊按鈕會出現(xiàn)一個彈窗（非常丑）

不過 dialog 作為一個 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/

再點擊按鈕，彈窗了一個稍微漂亮點的彈窗：

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

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

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

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

為什么使用

元素而不是第三方的 javascript 庫？

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

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

相比

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

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

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

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

相關(guān)文章

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

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

    lewinlee 評論0 收藏0

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

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

    buildupchao 評論0 收藏0

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

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

    trigkit4 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<