javascript - 影子 DOM : is it possible to encapsulate JS?

Question

我正在尝试寻找一种不使用 iframe 来封装 Javascript 的方法。理想情况下，我想要一种在父页面上加载外部 HTML 组件(小部件)的方法，而无需使用 iframe 附带的两步加载过程(首先加载主机页面，然后才加载 iframe 内容).

是否有可能通过一些新的网络组件技术来实现这一点——shadow DOM/templates/imports？我能够接近将 HTML 添加到影子 DOM 和封装 CSS，但无法确认是否有可能为组件的 javascript 执行获取单独的文档。

Answer 1

Web 组件，通过 HTML imports 使用, 封装 Shadow DOM HTML 和 相关脚本。

为了缩小术语范围，假设我们有一个 Polymer 组件 core-ajax .这是 the code .如您所见，它根本不提供任何 HTML 标记，仅封装脚本。

一旦在主机网页上导入为:

<link 
  rel="import"
  href="https://www.polymer-project.org/components/core-ajax/core-ajax.html"> 

此组件无需任何 javascript 编码即可执行 AJAX 调用:

<core-ajax
  auto
  url="http://gdata.youtube.com/feeds/api/videos/"
  params='{"alt":"json", "q":"chrome"}'
  handleAs="json"
  response='{{response}}'
</core-ajax>

以上将加载(因为 auto 属性已设置)指定 URL 的内容并将响应放入绑定(bind)的 response 变量中。与此组件通信的另一种方法是提供处理程序而不是将模板变量绑定(bind)到响应:

  - response='{{response}}'
  + on-core-response="{{handleResponse}}"

可以在页面的 javascript 中实现 handleResponse 函数，仅此而已。

UPD 虽然目前无法区分主文档和影子 DOM 使用的文档，但此功能 is being discussed在 w3c 邮件组工作了将近三年。不过，即使在“我们是否从未在作者空间中完全启用它们”等方面，讨论也远未得出结论。