使用原生javascript生成html内容
2016-11-08 16:54
260 查看
需求
在网站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就没有样式了。
相关文章推荐
- 使用了母版页的内容页中,如何在JavaScript中调用Html Input(Hidden)控件
- 原生javascript使用递归思路获取html跟元素
- 【转】使用Javascript改变HTML内容
- 使用HTML+Javascript制作代码生成工具
- (二)yii使用原生html不使用yii生成html表单如何忽略m层验证无法通过
- 一种使用 Javascript 生成html的方法
- python抓取javascript动态生成HTML内容的实践
- 在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
- 使用JAVASCRIPT控制,IFAME的内容,从而使用投票点击等功能
- JavaScript中生成HTML的字符格式函数
- 使用FreeMarker生成Html静态文件(实例)
- 在ASP中使用FSO组件生成HTML页面
- 在ASP中使用FSO组件生成HTML页面
- 使用流加载和保存HTML内容&遍历html的信息存入一个ini文件&使用MSHTML分析HTML代码
- 一个使用Neko提取HTML纯文本内容的程序例子
- 使用Javascript完成文件操作、添加新项到HTML控件SELECT中、读取SELECT控件中的选定项
- 技巧和诀窍:使用ASP.NET 2.0 CSS 控件适配器生成CSS友好的HTML输出
- 使用Javascript和DOM Interfaces来处理HTML
- 使用JavaScript删除ASP.NET生成的HttpCookie
- 在ASP中使用FSO组件生成HTML页面