原生JS路由,iframe框架

简介: 原生JS路由,iframe框架

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),会报错,是因为同文件中的操作是按照跨域处理的,在编辑器中按照网址打开即可

相关文章
|
24天前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
2月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
12天前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
2月前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
70 41
|
27天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
1月前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
40 4
|
2月前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
54 1
|
26天前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实践
【10月更文挑战第33天】在数字化时代的浪潮中,后端服务的效率和可靠性成为企业竞争的关键。本文将深入探讨如何利用Node.js和Express框架构建高效且易于维护的后端服务。通过实践案例和代码示例,我们将揭示这一组合如何简化开发流程、优化性能,并提升用户体验。无论你是初学者还是有经验的开发者,这篇文章都将为你提供宝贵的见解和实用技巧。
|
27天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的融合之道
【10月更文挑战第31天】在追求快速、灵活和高效的后端开发领域,Node.js与Express框架的结合如同咖啡遇见了奶油——完美融合。本文将带你探索这一组合如何让后端服务搭建变得既轻松又充满乐趣,同时确保你的应用能够以光速运行。
27 0
|
2月前
|
JavaScript 前端开发 API