Question

我试图在我的网站中嵌入另一个网站，但由于某些可能导致的问题，我不想使用iFrame或AJAX导入。

＆＃13;

<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>

＆＃13;

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

Answer 1

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

相反，您应该至少从其documentElement属性中获取导入文档的var content = link.import.documentElement //returns a html element元素：

<html>

但它仍然不正确，因为您将在<body>元素中插入一个document.body.innerHTML = link.import.querySelector( 'body' ).innerHTML元素，这很难看。

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

<template>

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

将整个HTML页面导入另一个页面

1 个答案: