gpt4 book ai didi

javascript - HTML 模板和 HTML 导入 - Firefox 中不执行内部脚本

转载 作者:行者123 更新时间:2023-11-30 16:18:54 27 4
gpt4 key购买 nike

我正在使用 webcomponents.js 来填充 Firefox 对网络组件的支持。

通过 HTML 导入加载 HTML 模板时,一旦将基于模板的自定义元素添加到主页的 DOM 中,模板中的脚本就不会执行。

它确实在 Chrome 中运行网站时执行(它具有 native Web 组件支持)。

但是,当模板放在主页本身时,Firefox 和 Chrome 都会执行这样的脚本。

请参阅 Eric Bidelmann 的示例,网址为 HTML5Rocks .这可以在 Chrome 和 Firefox 中运行(通过 webcomponents.js)——只要模板位于同一个 HTML 文件中。

<!DOCTYPE html>
<html>
<body>

<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
function useIt() {
var content = document.querySelector('template').content;
// Update something in the template DOM.
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent) + 1;
document.querySelector('#container').appendChild(
document.importNode(content, true));
}
</script>

<template>
<div>Template used: <span>0</span></div>
<script>alert('Thanks!')</script>
</template>



</body>
</html>

但是当模板文本显示时,它不会在通过 HTML 导入链接加载模板及其内容时运行。如前所述,它会加载内容,但不会在 Firefox 中执行脚本。

这是 webcomponents.js 中的错误,还是 Firefox 中的错误?有人对解决方法(“使用 Polymer 或 Angular”除外)有好的想法吗?

注意 - 这是基于使用 Firefox 43 和 Chrome 47。

最佳答案

这不是 Firefox 中的错误,Internet Explorer 11 具有相同的行为(使用 webcomponents.js)。

importNode方法未由 webcomponents.js 填充。这就是为什么 <script>元素在导入时未激活。

有一个issue opened与那个问题有关。

我的解决方法:我不插入脚本标签 <script>在进口 <template> 内(JS/HTML 分离:)。

另外,你可以解析你的 <template>正在寻找 <script>标签并尝试手动激活/执行它们(可能有点棘手......)

关于javascript - HTML 模板和 HTML 导入 - Firefox 中不执行内部脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35047590/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com