问题标签 [html5-import]

我使用 html5 导入和 JS 来创建某种 mvc，现在我遇到了问题。

当我导入模板并将其元素附加到我的 DOM 并注册一个事件时，它会被触发并且一切都很好。 但是随后该this实例包含导入模板而不是绑定方法是属性函数的对象.... :)

该问题的重要线路 - 了解流程 - 在附近有评论....

我的问题是：如何将该方法的父对象分配给我的self变量？

我有一些控制器父对象：

和一些 xyz-controller 扩展控制器（这是问题所在）：

导航通过它 selfe 将 dom 元素放到父文档中（这是在最后的模板文件中）：

还有一些 main.JS，它用 jquery 做一些事情，所以：

我正在使用 HTML 导入，作为在网站上动态注入内容的工具。它有效，完美，有一篇很好的文章 公开了在文件和模板上使用导入。

确实很少有其他文章，但比德尔曼的文章是最广泛的。它涵盖了导入中的脚本。但是，能够呈现导入的内容并能够运行脚本，我无法让它将数据保存在本地存储中。

我可以在导入器文件中从导入的文件运行脚本，就像警报一样。但是不可能捕获我需要存储和存储的数据。如何做到这一点？这是我的代码示例。

我有一个简单的选择，它的 id 是 dim_city。捕获更改值并存储在 localstorage 上的脚本非常简单：

作为单个文件，它运行良好并将数据存储在 localStorage 上。导入后，它会运行脚本，如警报，但不能存储在 localStorage 上。

显然浏览器支持 HTML 导入。

我正在使用 Web 平台的一些功能，例如 HTML 导入。

在 Chrome 52 上，一切正常，正如预期的那样。我知道 IE11 和 FF 47 上的 HTML 导入存在问题。

但是，我被要求为某些用户在 IE-11 上部署我的 Web 应用程序。痛苦从这里开始。正如在互联网上可以找到的几篇文章所建议的那样，我在 index.html 的头部调用了 webcomponents polyfills，这是“导入器”文件：

同样在头部本身：

使用基于应用状态的动态内容来实例化链接选择器的代码：

在 IE-11 上加载时，我在控制台中收到三个错误消息：

在 index.html 文件的末尾，我放了以下代码：

有趣的是，polyfill 可以工作，因为打印的是 onload 消息而不是 onerror。但是，在获取“导入”文件的内容时会出现问题：

顺便说一句，开头有以下代码：

正如我之前所说，这在 Chrome 上运行良好。问题出在 IE-11 甚至 Firefox 47 上。即使在 FF 中，我也将dom.webcomponents.enabled启用为 true。

为了使 HTML5 导入在 IE-11 和 FF-47 上正常工作，可以进行哪些改进。

请注意，用户需要 IE-11，Edge 是不可能的。我很欣赏你关于 vanillajs 的回答。我没有使用 jquery 或任何 js 包装器。谢谢。

我正在研究构建香草网络组件。我以前使用过 Polymer，并且喜欢您可以在一个文件中为您的组件提供模板、样式和 JavaScript 的事实。如果可能的话，我想用“香草”网络组件来实现这一点，但不知道怎么做。我已从此处获取代码并将其添加到我正在使用的文件中，如下所示：

这失败了，因为当我们尝试选择模板时它不存在，因为此时模板不在 DOM 中（对吗？）。

有什么办法可以做到这一点？我个人更喜欢这种在 JavaScript 中使用document.createElement.

我是 webcomponent 的新手，我阅读了一些指南，但我真的不知道如何在最新的 chrome 56 上构建一个简单的 webcomponent（所以，不需要 polyfill）。我想在没有外部库（没有聚合物等）的情况下使用它。我发现的唯一简单的例子是这个（https://github.com/webcomponents/hello-world-element），但我不明白为什么它需要一个服务器（polyserve）才能看到 index.html 工作。它只是客户端，如 Angular2。谢谢

我试图理解为什么 HTML5 Import 不适用于动态创建的link元素。

第一个例子。它工作正常。

main_page.html：

导入.html：

第二个例子。由于某种原因，它不起作用。

main_page.html：

导入.html：

为什么会发生以及如何解决？

https://www.webcomponents.org/community/articles/introduction-to-html-imports#window-and-document-object-in-an-imported-html建议使用var mainDoc = document.currentScript.ownerDocument;以获取导入的文档，以便任何其中的模板/元素可以像maidDoc.querySelector('#someid'). 这适用于单级导入；但是当有多个导入级别时失败。请参见以下示例：

索引.html

网站导航.html

导航项.html

使用 Chrome 开发人员工具进行调试时，document.currentScript.ownerDocument在 nav-item.html 中返回从其父级 (site-navigation.html) 返回的相同文档。因此，执行时我得到错误的内容currentDocument.querySelector('template').content.cloneNode(true)。在这种情况下会导致堆栈溢出异常！请看下面的屏幕截图：

给定图像的 url，这是一个返回图像宽度的函数：

它工作正常。new Image()如果我们使用而不是.它也（当然）有效document.createElement("img")。

但是，如果引用html 导入的文档对象，则该document.createElement("img")方法不起作用。document<link>

看看这个导入这个 html的例子。请注意，控制台输出：

并且永远不会输出最终的512and then "Finished."，就像它（似乎）应该那样。那是因为永远不会触发的onload事件imgEl；如果图像是用创建的，则永远不会加载document.currentScript.ownerDocument.createElement。我已经在 Chrome 69 中对此进行了测试。

这是预期的行为，还是错误？如果无法使用<link>'s创建图像，它至少不应该抛出错误document吗？