使用原生javascript生成html内容

需求

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

技术要点

  • 使用原生javascript
  • 跨域问题

参考源代码

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 = "
"
; var div = document.createElement("div"); div.innerHTML = $html; document.body.appendChild(div); var $html1 = "

左边

"
; 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;
}

效果图:
使用原生javascript生成html内容_第1张图片

总结

在这里使用到@import url(./style.css);, 把样式统一写到一个文件,然后通过js动态引用,可以有效对新生成的html content产生效果,不然如果在没有生成html content前,先让浏览器解释了css,那么html content就没有样式了。

你可能感兴趣的:(javascript)