问题标签 [html-imports]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

92 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
64 浏览

polymer - 导入官方论文库后聚合物测试中断

问题

我使用 CLI 创建了一个聚合物元素。这给了我一个元素条目和基本测试。这些测试运行良好。

包含paper-inputor后iron-icons，Firefox 中的测试仍然有效。然而，Chrome 中的相同测试会出现一个奇怪的错误。

如何在不破坏测试的情况下导入元素？导入铁元素时也出现了同样的问题。生产和 CI 中的 Chrome 对我来说非常重要。

再生产：

聚合物 CLI 1.6.0

聚合物 2.5.0

用户@randy-ubuntu:~/IdeaProjects/music-app-header$polymer init

您想使用哪个入门模板：polymer-2-element

信息：正在运行模板 polymer-2-element...

元素名称：music-app-header

元素简要说明：music-app-header

polymer test

更改代码：

bower install paper-button

添加纸张按钮导入如下：

polymer test

0 投票
1 回答
1484 浏览

javascript - 将整个 HTML 页面导入另一个页面

我正在尝试在我的网站中嵌入另一个网站，但由于某些可能导致的问题，我不想使用 iFrame 或 AJAX 导入来执行此操作。

基本上我正在尝试使用来自 Web 组件的 HTML 导入来做到这一点，但不幸的是，我上面的内容不起作用（我也在使用正确的浏览器），我发现的所有示例都仅用于导入特定的 div 或元素在导入的页面中。但是是否可以简单地加载整个页面并将其嵌入到另一个站点中？

0 投票
1 回答
758 浏览

javascript - 事件侦听器未从 HTML 导入中的 JS 脚本触发

我正在使用以下功能form.html导入：index.html

这可以创建一个新link rel="import"标签，并将其附加到headof index.html。当链接完成加载后，来自的内容form.html将附加到主体容器中。

在里面form.html我有一个脚本，它获取一个分页元素的句柄来附加一个事件处理程序：

我遇到的问题是，尽管控制台没有显示错误，但事件侦听器没有触发。

我认为这可能与加载顺序有关，并对此进行了一些试验，确保在解析脚本之前加载导入，尽管我不是 100% 知道这是否按预期工作。

我发现通过在importContent()函数之后动态加载它可以将我的代理脚本移动到主文档中，但我更愿意将表单的关联脚本封装在 Import 中。

想法？

0 投票
1 回答
503 浏览

javascript - HTML 导入不起作用...即使它受支持

我现在有点迷路了。我正在尝试使用自定义元素、模板、导入等的 Web 组件规范。但由于某种原因，导入规范不起作用！Chrome 似乎没有在源代码部分加载我的导入，即使它在我的版本 (67) 中受支持，所有代码都是正确的，路径名也是正确的。谁能帮帮我？这是我的项目：链接到 github 项目

如果您打开“index.html”，您可以看到我有一个指向 html 文件的链接标记。在该文件中，我使用模板标记并将其内容附加到我创建的自定义元素的 shadowDOM 中。如果我手动将代码复制并粘贴到主 html 文件的正文中，它可以工作，但是当我尝试导入它时不会加载。任何输入将不胜感激，谢谢！

user10001373
0 投票
3 回答
1216 浏览

html - 使用 2018 年全新的“HTML 导入”草案快速加载网页：将 rel="stylesheet" 替换为 rel="import"

在使用谷歌页面速度分析器测试我的移动友好页面时，它说：

消除首屏内容中的渲染阻塞 JavaScript 和 CSS。您的页面有 2 个阻塞的 CSS 资源。这会导致呈现页面的延迟。如果不等待以下资源加载，则无法呈现页面上的任何首屏内容。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。

根据这个谷歌页面和w3c 2018 年 3 月草稿，网络将很快支持 HTML 导入。：

请注意，Web 平台将很快支持以非渲染阻塞方式加载样式表，而无需使用 JavaScript，使用 HTML 导入。

我的第一个问题是：

将旧样式样式表转换为 HTML 导入的方法有哪些？

我可以简单地改变...

...进入：

我的第二个问题是：

（何时）Web 平台 [Chrome、Edge、Firefox 等主要浏览器和 apachee 上的 php 7.2 等主要服务器技术] 准备好安全地将站点范围从 迁移rel="stylesheets"到rel="import"？

我的第三个额外问题是：

除了根据谷歌的小幅性能提升之外，（将来）是否会出现使用 HTML 导入与旧的 rel="stylesheet" 相比的任何站点？

0 投票
1 回答
2264 浏览

internet-explorer - Web 组件、HTML 导入 polyfill 在 Firefox、IE 中不起作用

我正在尝试让 Web 组件和 HTML 导入在 Firefox 和 IE 中工作。

我按照Web Components GitHub repo中的说明进行操作，通过 npm 安装文件，并将其包含在文档的开头。

我有一个在文档正文中调用的自定义脚本。

在 Firefox 中，polyfill 是动态（同步）加载的，但会将正文中的脚本标签从以下位置转换：

至

我收到以下错误： ReferenceError: require is not defined。

我还尝试遵循这个 StackOverflow 答案并分别下载了 polyfill：

（旁注：是否建议从 repo 文件中复制/粘贴原始代码？我不知道另一种方法。我还发现实际上定位正确的文件非常令人困惑，因为有时文件位于根目录中文件夹，其他时候在“src”中。我错过了什么吗？）

我对文件进行排序，head如下所示：

注意：当我尝试遵循参考问题的建议时，我注释掉了“通用”Web 组件 polyfill。

在 Firefox 和 IE 中，我得到同样的错误：require is not defined. 我在 Firefox 中得到了这个额外的好处： 火狐地狱

我还尝试根据 WebComponents.org 使用特征检测来加载polyfill：

同样，我得到一组类似的错误： 更多火狐地狱火

启动应用程序的脚本，init.js我在 polyfill 被“加载”后调用，被设置为导入 HTML 片段并将它们附加到文档中。这是我用来执行此操作的函数：

不用说，但在 Chrome 中一切正常。

请帮忙！:D

0 投票
1 回答
118 浏览

javascript - Javascript inside HTML import not affecting imported HTML

I am importing an html document, form.html, from a script located in my index.html file.

form.html is a basically a fragment of HTML and at the bottom of the html is an internal script that attaches the html to the main document:

Afterwards, I reference an external script that is supposed to do some stuff to the HTML in form.html. However, this fails to have an affect in Firefox.

If I inspect the <head> of the main document in Firefox developer tools, I can see the "document fragment" composed and with the correct scripting affect. However, the actual imported HTML that appears in the body is unaffected.

I have tried inlining the script at the bottom of form.html. I also tried using window.onload to attach the external script to the end of the body of the main document as well as trying to use a link tag as per this question.

Not quite sure what else to try. I would like to keep the script modular and contained inside form.html if possible as to only request it when that HTML page is requested.

Thanks,

0 投票
2 回答
2891 浏览

javascript - 如何在没有 Html-Imports 的情况下打包或导入 Html-Templates

由于 Html-Imports 现在在 Chrome 中已弃用（https://www.chromestatus.com/feature/5144752345317376）并将被删除，我想知道替代方案是什么。

我目前正在使用 Html-Imports 导入 Html-Templates。到目前为止，我只看到两种选择：

  • 将所有 HTML 文件捆绑在一个文件中。这也将改善生产中的下载时间，但这会减少封装和模块化。有一个聚合物捆绑器可以通过遍历分离的 HTML 文件中的 HTML-Import-Statements 来完成这项工作。但这意味着，即使将来任何浏览器都不支持 HTML 导入，它们也会保留在我的代码中。
  • 使用 XHttpRequests 构建某种模块加载器，并在运行时将模板编入一个 HTML 文件。这将保留封装和模块化，但这对我来说很糟糕，因为我基本上会自己重建导入语句。

有没有一种新的方式来导入 Html 模板？（通过“香草”我基本上是指一种不涉及任何额外工具（如预编译器或捆绑器）的方式）

0 投票
0 回答
7326 浏览

polymer - 有没有办法使用 es6 模块将 html 模板导入 javascript？

关于这个主题似乎有很多过时的问题，我找不到最近的问题（2018 年）。其他问题也只是集中在让它工作上，我专注于沿着 ES6 模块关于 HTML 导入的路径进行这项工作的正确前进道路。

所有浏览器似乎都同意 html 导入已死

如果这是真的，是否有导入html的好方法

在 JavaScript 中使用？

我在这里找到了这个技巧 -创建和使用自定义 HTML 组件？，但它依赖于 JavaScript 文件中的 HTML 作为字符串。

在我的完美世界中，我可以定义一个 HTML 文件 template.html（所以我得到了漂亮的编辑器颜色编码），但能够导入它以在我的 dom 中使用。

我知道有像 lit-html 这样的库可以让这很容易，但似乎因为 ES6 模块现在是标准的，并且由于 html 导入已被弃用以代替 ES6 模块，所以应该有一些简单的本地方法来做到这一点？

0 投票
0 回答
168 浏览

javascript - Chrome 中未触发文档加载事件

我们有一个使用 WebComponents V0 规范的应用程序。我们使用 Polymer 的 vulcanizer 将所有组件组合成一个可导入的 HTML，然后从主应用程序页面导入（HTML 导入）。最近注意到 Chrome 中的一个问题（不确定版本，因为）该文档在第一次尝试时没有加载。在随后从缓存重新加载时，文档会成功加载。禁用缓存后，文档不会再次加载。浏览器选项卡一直在旋转，网络面板中没有 DOMContentLoaded 或 Load 事件标记。

我们如何知道 Chrome 中发生了什么？没有发生文档时要遵循的典型步骤load是什么？

以下是我可以确认的事情：

  • 代码中没有无限循环。浏览器主线程似乎处于空闲状态
  • 网络面板中没有待加载的资源
  • PerformanceChrome devtools 面板上没有任何活动
  • 尝试切换 polyfill
  • 问题似乎仅在页面中使用 webcomponents 时发生
  • 文件readyState是loading. 页面上所有其他 HTML 导入的状态为complete
  • 隐身模式也没有运气

12345678910