2

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

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

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

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

 var ie = importDoc.querySelector('#dim_city');   // capture the selector value.
   function getData() {
   var idc=ie.options[ie.selectedIndex].value;
   var  dataCi=(idc);
   localStorage.setItem("ic", dataCi);
   var storedData = localStorage.getItem(dataCi);

   mainDoc.body.appendChild(dataCi.cloneNode(true)); // this adds tha captured data to importer file.
 }

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

显然浏览器支持 HTML 导入。

4

2 回答 2

1

根据定义，导入没有浏览上下文，因此没有localStorage.

http://w3c.github.io/webcomponents/spec/imports/#terminology

于 2016-07-21T04:40:24.397 回答
0

我找到了解决方案，是的，任何导入的文件都在 localStorage 上保存数据。所以我要自己回答：

问题是从选择器的属性选项中获取值。这是一种旧方法，在导入时似乎在 Chrome 中发生冲突。所以解决方案是代替这个来获取选定的值：

var idc=ie.options[ie.selectedIndex].value;

用这个：

var idc=docuemnt.getElementById('dim_city').value;

另一方面，让我澄清一下，任何导入文件的 DOM 确实不是导入器 DOM 的一部分，它可以访问它自己的 DOM 和主 DOM - 导入器的 DOM，引用它的 DOM 并将其附加到主的 DOM。

于 2016-07-21T17:41:56.763 回答