0

我正在尝试在我的网站中嵌入另一个网站，但由于某些可能导致的问题，我不想使用 iFrame 或 AJAX 导入来执行此操作。

<html>
 <head>
  <link rel="import" href="mysite.html">
</head>
  <body>
    <script>
	var link = document.querySelector('link[rel="import"]');
    var content = link.import;
    document.body.appendChild(content.cloneNode(true));
  </script>
  </body>
</html>

基本上我正在尝试使用来自 Web 组件的 HTML 导入来做到这一点，但不幸的是，我上面的内容不起作用（我也在使用正确的浏览器），我发现的所有示例都仅用于导入特定的 div 或元素在导入的页面中。但是是否可以简单地加载整个页面并将其嵌入到另一个站点中？

4

1 回答 1

1

它不起作用，因为您从元素的import属性中获得的对象是Document接口。您不能在元素内插入这种类型的对象。<link rel="import"><body>

相反，您至少应该<html>从其documentElement属性中获取导入文档的元素：

 var content = link.import.documentElement  //returns a html element

但它仍然不正确，因为您随后将在元素中插入一个<html>元素<body>，这很丑陋。

您宁愿将导入文档的 innerHTML 文本复制到主要文档：

 document.body.innerHTML = link.import.querySelector( 'body' ).innerHTML

或者将要导入的 HTML 放在 a<template>中，如果要延迟脚本执行和加载，这样会更好。

于 2018-04-18T21:19:51.623 回答