dialog元素和彈出式API是Web平臺(tái)的強(qiáng)大添加。 我最近提供了對(duì)其應(yīng)用的詳細(xì)分析，並發(fā)現(xiàn)了無(wú)證件的技術(shù)。 但是，他們的單獨(dú)實(shí)現(xiàn)感到不必要的複雜。 > Web瀏覽器正在引入“調(diào)用命令” -

>屬性 - 簡(jiǎn)化與彈出式，對(duì)話(huà)框和未來(lái)功能的交互，最小化JavaScript Reliance。 這些屬性還引入了新的JavaScript事件。 command commandfor

記住，這些是實(shí)驗(yàn)特徵。 啟用它們：

Chrome Canary 134（flag：）

firefox Nightly 135（標(biāo)誌：> enable-experimental-web-platform-features>野生動(dòng)物園技術(shù)預(yù)覽（flag：）
• dom.element.invokers.enabled
他們的腳本任務(wù)的優(yōu)雅抽象表明，很可能採(cǎi)用了廣泛的採(cǎi)用。
• InvokerAttributesEnabled基本用法：

>使用一個(gè)類(lèi)似按鈕的元素（例如，

）與>屬性（指定命令名稱(chēng)，例如“ show-modal”）和>（引用目標(biāo)元素的ID）。

>讓我們探索命令值。 <button></button> <a></a>command屬性值： commandfor

<button command="show-modal" commandfor="dialogA">Show dialogA</button>
<dialog id="dialogA">...</dialog>

。 它允許在沒(méi)有JavaScript的情況下顯示模態(tài)顯示。 這反映了現(xiàn)有的HTML彈出的彈出案，創(chuàng)建了一種更一致的方法。

：沒(méi)有模式對(duì)話(huà)框的
• 命令。 鑑於popover API的功能，非模式對(duì)話(huà)可能會(huì)過(guò)時(shí)。

  > show-modal showModal()

：html等效於，關(guān)閉對(duì)話(huà)框。

• show show

  ，
，
• ：這些鏡子

  ，close和close()，

  。 雖然有用，但它們的功能已經(jīng)可以通過(guò)現(xiàn)有的彈出屬性訪問(wèn)。
>

• show-popover這是一個(gè)摘要：hide-popover

  Command	Equivalent JavaScript Method	Notes
  show-modal	showModal()	Shows a modal dialog.
  close	close()	Closes a dialog or popover.
  show-popover	showPopover()	Shows a popover (redundant with existing popover attributes).
  hide-popover	hidePopover()	Hides a popover (redundant with existing popover attributes).
  toggle-popover	togglePopover()	Toggles a popover (redundant with existing popover attributes).
  --custom-command	N/A	Custom commands prefixed with --.

  > JavaScript事件處理：> 在目標(biāo)元素上調(diào)用命令觸發(fā)a

  事件。 這對(duì)於缺少

  事件的command元素特別有用。 dialog> show

  彈出事件的處理方式相似：

  <button command="show-modal" commandfor="dialogA">Show dialogA</button>
  <dialog id="dialogA">...</dialog>

  dialogs.forEach(dialog => {
    dialog.addEventListener("command", event => {
      if (event.command === "show-modal") { /* Dialog shown */ }
      else if (event.command === "close") { /* Dialog closed */ }
    });
  });

  提供了調(diào)用按鈕元素。 屬性也可以通過(guò)JavaScript設(shè)置：

  > event.source

  popovers.forEach(popover => {
    popover.addEventListener("command", event => {
      if (event.command === "show-popover") { /* Popover shown */ }
      // ...
    });
  });

  >自定義命令：

  > >自定義命令（例如，

  ）允許擴(kuò)展功能。

  > --spin-me-a-bit

  未來(lái)支持：

  > >最初專(zhuān)注於

  和彈出案，但預(yù)計(jì)對(duì)，<dialog></dialog>，<details></details>，以及全屏控件的支持。 <input type="color">> <video></video>好處：

  >調(diào)用命令減少JavaScript，提供類(lèi)似事件的處理，並為現(xiàn)有API提供替代的交互方法。 他們完善並增強(qiáng)了現(xiàn)有功能。

以上是調(diào)用命令：與對(duì)話(huà)框，彈出窗口的其他方法……等等？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！