调用命令：与对话框，弹出窗口的其他方法……等等？

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中文网其他相关文章！