Mil*_*red 11 javascript html5 web-component custom-element html-imports
我已经定义了一个自定义元素,我只想在自定义元素升级到其注册类型时才执行脚本.用例是我必须调用自定义方法.
我的主要html文件如下所示:
<project-list></project-list>
<script>
var project_list = document.getElementsByTagName("project-list")[0]
project_list.custom_method("some_data");
</script>
自定义元素在HTML导入中注册,如下所示:
<script>
"use strict";
var currentScript = document._currentScript || document.currentScript;
class ProjectList extends HTMLElement {
createdCallback(){
console.log("created");
}
custom_method(data) {
console.log("custom_method() OK");
console.log(data);
this.innerHTML = data;
}
}
document.registerElement("project-list", ProjectList);
</script>
我的问题很简单:如何确保主要html文件中的脚本仅在自定义元素获得其custom_method方法后才被调用？
我正在寻找一个优雅的解决方案.规范作者会想到的东西.我不介意更改架构(例如,如果有必要,可以将javascript从主文件移动到另一个自定义元素中).
同步 HTML 导入
正如@dandavis 所建议的，由于和元素的sync默认行为，您只需按正确的顺序放置标签：在方法调用之前注册。<link><script>
或者，您可以在触发DOMContentLoaded或window.onload事件时调用您的自定义方法，如下所示：
window.onload = function()
{
var project_list = document.getElementsByTagName("project-list")[0]
project_list.custom_method("some_data")
}<project-list></project-list>
<script>
"use strict";
var currentScript = document._currentScript || document.currentScript;
class ProjectList extends HTMLElement {
createdCallback(){
console.log("created");
}
custom_method(data) {
console.log("custom_method() OK");
console.log(data);
this.innerHTML = data;
}
}
document.registerElement("project-list", ProjectList);
</script>异步 HTML 导入
如果由于某些原因您想异步加载 HTML 导入文件，您可以等待该link.onload事件。此时的| <script>内部导入已经执行，自定义元素注册并创建。
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="import" href="projectList.html" id="projectList" async>
<script>
projectList.onload = function ()
{
console.log( "import {loaded}" )
var project_list = document.getElementsByTagName( "project-list" )[0]
project_list.custom_method("some_data")
}
</script>
</head>
<body>
<project-list id="pl"></project-list>
<script>
console.warn( "custom_method is " + pl.custom_method ) //undefined
</script>
</body>
</html>
使用 WebComponents.js polyfill
在这种情况下，polyfill 不会在导入加载后立即实例化创建的对象。相反，您应该收听WebComponentsReady事件：
document.addEventListener( "WebComponentsReady", function ()
{
console.log( "WebComponentsReady" )
var project_list = document.getElementsByTagName( "project-list" )[0]
project_list.custom_method( "some_data" )
} )
它适用于 Firefox、IE 11 和 Chrome。
| 归档时间： |
|
| 查看次数： |
1173 次 |
| 最近记录： |