Question

我是html的新手并尝试做一些小页面。我创建了一个主要的html页面和其他html页面，其中包括一些菜单。我试图在主html中导入它但它不可见。但是当我直接打开它时，我可以看到内部的HTML。

<!DOCTYPE HTML>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
<html lang = "en">

    <head>
         <h1>Demo Page</h1>
    </head>

    <body>
         <link rel="import" href="topmenu.html">
    </body>

</html>

我的内部HTML是：

<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
<div class="topmenu" id="topMenu">
    <a href="aboutMe">About Me</a>
</div>

那我在这里做错了什么？

Answer 1

你搞砸了。此外，由于兼容性，我已删除导入（请参阅：https://caniuse.com/#feat=imports）。

<!DOCTYPE HTML>
<html lang = "en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
  </head>
  <body>
    <div class="topmenu" id="topMenu">
      <a href="aboutMe">About Me</a>
    </div>       
    <h1>Demo Page</h1>      
  </body>
</html>

如果您不关心兼容性，并且您不关心导入需要javascript，您可以将它们用作他的答案中描述的rijin。我个人只是在头文件中添加一个javascript文件，在文档中写入一些东西，如：

<head>
  ...
  <script src="topmenu.js"></script>
</head>

topmenu.js的内容：

document.prepend( "<p> mystuff to import </p>" );

或使用jQuery：

$( "body" ).prepend( "<p> mystuff to import </p>" );

这是100％跨浏览器（如果你使用jQuery）。

Answer 2

检查下面的plunkr网址 - 你会得到一些线索。

https://plnkr.co/edit/lLeT0QsYrMx0NqTB1W9y?p=preview

id

Answer 3

HTML导入显然仍处于试验阶段，并非所有浏览器都支持此功能;见here。

Google Chrome v.31赞助支持html导入。 OP只需对代码进行一些更改即可在此浏览器中运行。将META和LINK标记放在HTML页面的HEAD部分。（可选）您可以向link元素添加id属性，以允许以下JavaScript代码轻松引用它。

在JavaScript代码中，变量内容被分配了与HTML导入页面对应的HTML对象。下一行将HTML对象中body元素的innerHTML分配给当前文档的body innerHTML属性。为了避免拆除H1元素及其文本＆＃34; Demo Page＆＃34;，可以使用＆＃34; + =＆＃34;运算符附加所需内容，如下所示：

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
<link id="myImportLink" rel="import" href="aboutme2.html">
</head>

    <body>
       <h1>Demo Page</h1>

<script>
var content = document.getElementById('myImportLink').import;
document.body.innerHTML += content.body.innerHTML;
</script>
</body>
</html>

注意，导入链接指的是名为＆＃34; aboutme2.html＆＃34;的文件。避免与我系统上的其他文件发生冲突，但您可以按照自己的意愿调用它。我建议如果它是一个HTML文件，那就命名为＆＃34; aboutMe.html＆＃34;因为一个href为＆＃34; aboutMe＆＃34;听起来像一个文本文件。此外，我已经修饰了内容以显示更多可能性。

<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
</head>

<body>
<div class="topmenu" id="topMenu">
    <a href="#" onclick="document.getElementById('me').style.visibility='visible'";">About Me</a>
    <div id="me" style="visibility:hidden">
        <ol>
          <li>Cook</li>
          <li>Coder</li>
          <li>Candlestick Maker</li>
    </div>
</div>

</body>
</html>

仅供参考：这是一个有用的article，涵盖了HTML导入。

Answer 4

我建议将HTML文件的文件后缀更改为.php（即main.php和topmenu.php），并使用以下php代码添加topmenu.php文件：

<!DOCTYPE HTML>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0"/>
<html lang = "en">

    <head>
         <h1>Demo Page</h1>
    </head>

    <body>
         <?php include "topmenu.php"; ?>
    </body>

</html>

您必须使用（本地）服务器来正确查看结果，但由于您要在“真实”服务器上发布该页面，这应该不是什么大不了的事，而且这绝对是可以兼容的任何浏览器，因为包含第二个文件发生在服务器级而不是浏览器中......

内部html不可见

4 个答案: