Javascript HTML5导入与动态创建的链接_Javascript_Html_Html5 Import

Javascript HTML5导入与动态创建的链接

javascript html

Javascript HTML5导入与动态创建的链接,javascript,html,html5-import,Javascript,Html,Html5 Import,我试图理解为什么HTML5导入不能与动态创建的链接元素一起工作第一个例子。很好 main_page.html： <head> <link rel="import" href="import.html"> </head> <body> <script> var imported = document.querySelector('link[rel="import"]').import; v

我试图理解为什么HTML5导入不能与动态创建的链接元素一起工作

第一个例子。很好

main_page.html：

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <script>
        var imported = document.querySelector('link[rel="import"]').import;
        var el = imported.querySelector('#foo');
        document.body.appendChild(el);
    </script>
</body>

<body>
    <script>
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = 'import.html';
        document.head.appendChild(link);

        var imported = document.querySelector('link[rel="import"]').import;
        var el = imported.querySelector('#foo');
        document.body.appendChild(el);
    </script>
</body>

import.html：

<div id="foo">foo</div>

<div id="foo">foo</div>

第二个例子。由于某种原因，它不起作用

main_page.html：

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <script>
        var imported = document.querySelector('link[rel="import"]').import;
        var el = imported.querySelector('#foo');
        document.body.appendChild(el);
    </script>
</body>

<body>
    <script>
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = 'import.html';
        document.head.appendChild(link);

        var imported = document.querySelector('link[rel="import"]').import;
        var el = imported.querySelector('#foo');
        document.body.appendChild(el);
    </script>
</body>

import.html：

<div id="foo">foo</div>

<div id="foo">foo</div>

为什么会发生以及如何修复？

这是因为在调用querySelector“link[rel=import]”时链接尚未加载

修复此问题的一种方法是在使用link.onload加载链接时运行后续代码。您甚至可以保存querySelector调用，这将使它更快一些：

 var loadFoo = function(event) {
   var imported = event.target.import;
   var el = imported.querySelector('#foo');
   document.body.appendChild(el);
 }

 var link = document.createElement('link');
 link.rel = 'import';
 link.href = 'import.html';
 link.onload = loadFoo;
 document.head.appendChild(link);

您可以而且可能应该添加一个OneError处理程序，以便在出现问题时运行。

谢谢：-它很有效。你能详细说明一下，还有什么方法可以解决这个问题？我只是出于好奇，要求进一步自我教育。但对于一个链接来说，这似乎是矫枉过正。看这个：这是关于图像的，但link的工作方式大致相同。