使用原生javascript生成html内容

最新推荐文章于 2025-07-04 10:34:25 发布

黄幸辉

最新推荐文章于 2025-07-04 10:34:25 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 导航

本文链接：https://blog.youkuaiyun.com/u014096278/article/details/53084193

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在网站A中利用原生JavaScript从网站B动态获取并渲染导航栏和侧边栏，解决跨域问题。通过将样式集中写入一个CSS文件，并在HTML内容生成后再引用，确保样式正确应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

在网站A增加一个导航栏和侧边栏，但是导航栏和侧边栏内容放在另个网站B，需要在网站A直接引用网站B的导航栏和侧边栏的JS。

技术要点

使用原生javascript
跨域问题

参考源代码

html内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>js加载模块</title>
    <script type="text/javascript">
      window.onload = createTopHtml;
      function createTopHtml() {
        var topCss = "@import url(./style.css);"; //定义内容
        var style = document.createElement("style");
        style.type = "text/css";
        style.textContent = topCss;
        document.head.appendChild(style);
        var $html = "<div class='topDiv'><button>点我登录</button> <select><option>请选择</option><option>1</option><option>2</option></select></div>";
        var div = document.createElement("div");
        div.innerHTML = $html;
        document.body.appendChild(div);
        var $html1 = "<div class='leftDiv'><p>左边</p></div>";
        var div1 = document.createElement("div");
        div1.innerHTML = $html1;
        document.body.appendChild(div1);
      }
    </script>
  </head>
  <body>
    <div class="main">
      <p align="center">內容</p>
    </div>
  </body>
</html>

css内容：

.topDiv{
  top:1px;
  background-color: red;
  width: 100%;
  height: 100px;
  clear: both;
  position: fixed;
}
.leftDiv{
  left: 0px;
  background-color: yellow;
  width: 30px;
  height: 100%;
  clear: both;
  position: fixed;
  bottom: 0px;
}
.main{
  background-color: green;
  width: 100%;
  height: 400px;
}