調用命令：與對話框，彈出窗口的其他方法……等等？

dialog元素和彈出式API是Web平台的強大添加。 我最近提供了對其應用的詳細分析，並發現了無證件的技術。 但是，他們的單獨實現感到不必要的複雜。 > Web瀏覽器正在引入“調用命令” -

和

>屬性 - 簡化與彈出式，對話框和未來功能的交互，最小化JavaScript Reliance。 這些屬性還引入了新的JavaScript事件。 command commandfor

實驗狀態：

記住，這些是實驗特徵。 啟用它們：

Chrome Canary 134（flag：）

firefox Nightly 135（標誌：> enable-experimental-web-platform-features>野生動物園技術預覽（flag：）
• dom.element.invokers.enabled
他們的腳本任務的優雅抽象表明，很可能採用了廣泛的採用。
• InvokerAttributesEnabled基本用法：

>使用一個類似按鈕的元素（例如，

，

）與>屬性（指定命令名稱，例如“ show-modal”）和>（引用目標元素的ID）。

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

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

：HTML等效於

。 它允許在沒有JavaScript的情況下顯示模態顯示。 這反映了現有的HTML彈出的彈出案，創建了一種更一致的方法。

：沒有模式對話框的
• 命令。 鑑於popover API的功能，非模式對話可能會過時。

  > show-modal showModal()

：html等效於，關閉對話框。

• show show

  ，
，
• ：這些鏡子

  ，close和close()，

  。 雖然有用，但它們的功能已經可以通過現有的彈出屬性訪問。
>

• show-popover這是一個摘要：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事件處理：> 在目標元素上調用命令觸發a

  事件。 這對於缺少

  事件的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 */ }
    });
  });

  提供了調用按鈕元素。 屬性也可以通過JavaScript設置：

  > event.source

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

  >自定義命令：

  > >自定義命令（例如，

  ）允許擴展功能。

  > --spin-me-a-bit

  未來支持：

  > >最初專注於

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

  >調用命令減少JavaScript，提供類似事件的處理，並為現有API提供替代的交互方法。 他們完善並增強了現有功能。

以上是調用命令：與對話框，彈出窗口的其他方法……等等？的詳細內容。更多資訊請關注PHP中文網其他相關文章！