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

相关文章
|
4月前
|
Web App开发 JavaScript 前端开发
深入浅出Node.js后端框架
【10月更文挑战第34天】在数字化时代,后端开发如同一座桥梁,连接着用户界面与数据处理的两端。本文将通过Node.js这一轻量级、高效的平台,带领读者领略后端框架的魅力。我们将从基础概念出发,逐步深入到实战应用,最后探讨如何通过代码示例来巩固学习成果,使读者能够在理论与实践之间架起自己的桥梁。
|
2月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
45 3
|
3月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
704 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
3月前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
4月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
4月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
71 2
|
4月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
4月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
139 1
|
4月前
|
JavaScript 中间件 API
Node.js进阶:Koa框架下的RESTful API设计与实现
【10月更文挑战第28天】本文介绍了如何在Koa框架下设计与实现RESTful API。首先概述了Koa框架的特点,接着讲解了RESTful API的设计原则,包括无状态和统一接口。最后,通过一个简单的博客系统示例,详细展示了如何使用Koa和koa-router实现常见的CRUD操作,包括获取、创建、更新和删除文章。
105 4
|
4月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
78 0

热门文章

最新文章