需求
在网站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;
}效果图： 
总结
在这里使用到@import url(./style.css);, 把样式统一写到一个文件，然后通过js动态引用,可以有效对新生成的html content产生效果，不然如果在没有生成html content前，先让浏览器解释了css，那么html content就没有样式了。