我已经定义了一个自定义元素,并且只想在该自定义元素升级到其注册类型时才执行脚本。用例是我必须调用自定义方法。
我的主要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>
我的问题很简单:如何确保仅在自定义元素获得其custom_method
方法之后才在主html文件中调用脚本?
我正在寻找一种优雅的解决方案。规范作者可能会想到的东西。我不介意更改架构(例如,如有必要,例如将javascript从主文件移动到另一个自定义元素)。
同步HTML导入
正如@dandavis所建议的那样,由于and元素的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。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句