js单页面路由
hash
原理
基于 hash (location.hash + hashchange事件)
即通过切换hash值(url中 从# 开始到结束的部分)来实现页面的切换
可以通过hashchange事件，监听到hash值的变化,改变 URL 的方式只有这几种：通过浏览器前进后退改变 URL、通过<a>标签改变 URL、通过window.location改变URL，这几种情况改变 URL 都会触发 hashchange 事件
hash的实现方法
- 设置a标签 , href = ‘#/aaa’,当点击该标签时，会在当前url后添加上"#/aaa"，同时触发hashchange事件
- 直接在js中对location.hash = ‘#/aaa’
或者
//定义一个router对象 function Router() { this.routes = {};//储存所有的路由 this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){}; }; Router.prototype.refresh = function() { this.currentUrl = location.hash.slice(1) || '/'; this.routes[this.currentUrl](); }; Router.prototype.init = function() { window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); } //路由初始化 window.Router = new Router(); window.Router.init(); //实例中的应用 var content = document.querySelector('body'); // change Page anything function changeBgColor(color) { content.style.backgroundColor = color; } Router.route('/', function() { changeBgColor('white'); }); Router.route('/blue', function() { changeBgColor('blue'); }); Router.route('/green', function() { changeBgColor('green'); });
新建一个router实例，进行初始化，然后进行url与callback的绑定，就可以在hash发生改变时触发相应的值
history
基于 history.pushState() + popState事件
原理
pushState()方法是修改url的地址，popstate监听地址的改变，但是手动的进行pushState不会触发popstate事件
pushState()方法，添加历史条目，history.pushState(state, title, url),需要三个参数:对象state，下一个页面的title，动态改变的url(可选)
replaceState()方法，history.replaceState(state, title, url)，直接替换
实现方法
html代码
<body> <ul> <li><a href="#/">turn white</a></li> <li><a href="#/blue">turn blue</a></li> <li><a href="#/green">turn green</a></li> </ul> </body>
js代码
<script type="text/javascript"> (function(){ var content = document.querySelector('body'); // 改变背景颜色 封装函数 function changeBgColor(color){ content.style.backgroundColor = color } // history路由跳转 var li = document.querySelectorAll('li') console.log(li); history.replaceState(null,null,'')//最开始的状态,采用replace直接替换 li[0].addEventListener('click',function(){ history.pushState(null,null,'#/')//之后的状态，需要保存 changeBgColor('white') }) li[1].addEventListener('click',function(){ history.pushState(null,null,'#/blue')//之后的状态，需要保存 changeBgColor('blue') }) li[2].addEventListener('click',function(){ history.pushState(null,null,'#/green') changeBgColor('green') }) })()
iframe框架
iframe的用途
iframe : 可以实现在网页中套网页，是一个html标签 (https 的网页不可以嵌套 http 的网页)
iframe常用属性
frameborder ：是否显示边框 yes/no
width ：宽度
height ：高度
name ：框架的名称，window.frames[name]时专用的属性
src ：在iframe中显示的目标网站的url,(可以是页面地址，也可以是图片的地址)
scrolling : 是否显示滚动条，yes/no/auto
sandbox : 安全限制
//将href.html嵌入 //href.html部分代码 <li><a href="http://www.bilibili.com" target="myframe">bili</a></li> <li><a href="http://www.taobao.com" target="myframe">淘宝</a></li> ------------------------------------------------------- //iframe.html代码 使b站页面和淘宝页面可以在框架中显示 <iframe src="href.html" frameborder="0" width="10%" height="700px"></iframe>//将href.html放入框架中 <iframe frameborder="0" name="myframe" width="80%" height="700px" ></iframe>
给a链接设置相同的target，使iframe中的name属性的值与target值相同，即可通过target为a链接到指定框架(通过name)
iframe的js操作（同域）
在父页面中获取iframe子页面的元素
<body> <iframe src="text2.html" frameborder="0" id="one" name="one" width="100" height="300"></iframe> <iframe src="text3.html" frameborder="0" id="two" name="two" width="100" height="300"></iframe> </body> //获取iframe的window对象 var iwindow = document.getElementById('one').contentWindow //获取iframe的document对象 var idoc = iwindow.document.getElementById(xxx)
或者 结合name属性
var idoc = window.frames['one'].document.getElementById(xxx var idoc = window.frames[1].document.getElementById(xxx //frames[]中可以写索引也可以写 name属性的值
在iframe子页面中获取父页面的元素
var idoc=window.parent.document.getElementById();
注：此时，在本地用绝对路径直接运行HTML文件（如 file:///D:/code/vscodeworkspace/iframe/text.html），会报错，是因为同文件中的操作是按照跨域处理的，在编辑器中按照网址打开即可
