Question

在我的服务器中，我有一个名为“creategame.html”的HTML文档。

在单独的 html文档中，我正在导入“creategame.html”，如下所示：

<head>
...
<link rel="import" href="<c:url value="/resources/html/creategame.html" />" id="create-game-forms">
...
</head>

（忽略<c:url>事物，这只是与我的视图渲染引擎相关的语法。

在第一页加载时，我能够使用：

成功检索html文档

var template = document.getElementById("create-game-forms").import;

（“create-game-forms”是导入html文档的原始<link rel...>标记的ID）

我可以使用...

从导入的html文档中检索标记

template.getElementById("my-custom-form-here")

（然后我可以使用javascript将html的外部片段注入我的页面）

然而，在我重新加载页面后......突然模板变为空...并且调用template.getElementById（）会引发错误。

我想知道是否有人知道为什么会这样？或者，如果有人能指出我可能出现问题的方向，我真的很感激！

Answer 1

啊，所以我想出来了。事实证明我在准备好之前就使用了导入的元素。处理此问题的正确方法是等待“加载”事件，如下所示：

var template = document.getElementById("create-game-forms");

template.addEventListener('load', function(){
  var imported_template = template.import;
  //do stuff with your imported template
});

页面重新加载后无法检索导入的HTML文档

1 个答案: