JS控制静态页面之间传递参数获取参数并应用
在项目中遇到这也一个问题:
有a.html和b.html。
1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用。
2.a页面已经打开,b页面无论是否打开。在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面。
注意:不涉及跨域问题。
想了很久,终于想到了解决方案。
第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面
这是a页面代码:
0 | <button>跳转设置</button> |
1 | <script> |
2 | var btn = document.querySelector('button'); |
3 | console.log(window); |
4 | |
5 | btn.addEventListener('click', function(){ |
6 | window.location = 'ci.html#bgc=#369?wd=500' |
7 | }) |
8 | </script> |
由代码可以知道,点击按钮跳转页面,跳转的url后面多了一系列参数,这个并不会影响跳转的地址,当b页面打开后,可以获取location截取字符串获得变量及变量值,再进行应用。
这是b页面代码:
0 | <div></div> |
1 | <script> |
2 | var div = document.querySelector('div'); |
3 | var bl = window.location.hash.slice(1).split('?'); |
4 | if(bl.length >= 1){ |
5 | for(var i = 0; i < bl.length; i += 1){ |
6 | switch (bl[i].split('=')[0]) { |
7 | case 'bgc': |
8 | document.body.style.background = bl[i].split('=')[1]; |
9 | break; |
10 | case 'wd': |
11 | div.style.width = bl[i].split('=')[1] + 'px'; |
12 | break; |
13 | default: |
14 | null; |
15 | break; |
16 | } |
17 | } |
18 | } |
19 | </script> |
通过截取字符串取得url传递过来的变量应用。成功!
第二个问题,我想的是通过iframe来达到目的,这只是一个障眼法。
在a页面动态创建一个iframe,并设置src值为b页面,display为none。再通过iframe的contentDocument属性获取返回的iframe的文档。
在文档内获取到所需要的元素并应用。
源码:
0 | <span>11111111111</span> |
1 | <script> |
2 | var fram = document.createElement('iframe'); |
3 | fram.src = 'http://www.vip.com/kongzhi/fram2.html'; |
4 | fram.style.display = 'none'; |
5 | document.body.appendChild(fram); |
6 | fram.onload = function(){ |
7 | var doc = fram.contentDocument || fram.contentWindow.document; |
8 | var p = doc.querySelector('p'); |
9 | document.body.appendChild(p); |
10 | } |
11 | </script> |
很轻松搞定,希望对各位看官有所帮助,欢迎你来和我探讨交流学习。
JS控制静态页面之间传递参数获取参数并应用的更多相关文章
- JS多个函数之间传递参数问题
JS多个函数之间传递参数的一个重要思想是在页面定义一个隐藏域,当第一个函数请求到数据时候修改隐藏域的值,第二个函数用jQuery的选择器选择页面中隐藏域的值. 比如: 页面中定义一个隐藏的页号. &l ...
- JSP页面之间传递参数的方法有哪些?
JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接
- [Windows Phone学习笔记]页面之间传递对象
在Windows Phone中,页面之间传递参数就类似Web开发中一样,通过QueryString的形式进行传递,但是如果需要传递对象,则无法通过QueryString形式了,其实也可以,把对象序列化 ...
- ASP.NET页面之间传递值的几种方式(转载)
页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...
- spring boot 之如何在两个页面之间传递值(转)
原文地址:spring boot 之如何在两个页面之间传递值 问题:页面之间的跳转,通常带有值的传输,但是,在现在比较流行的SPRING MVC WEB 开发模型中,设计机制导致页面之间的直接接跳转和 ...
- ASP中页面之间传递值的几种方式
ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryS ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得
js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得
- 使用session在jsp页面之间传递多维数组,用于实现全局变量的效果
使用session在jsp页面之间传递多维数组:发送数据的jsp页面:int [][] form_number=new int[4][4]; session.setAttribute("se ...
随机推荐
- openfire研究之部署连接管理器(connection manager)
http://blog.sina.com.cn/s/blog_7325f5150101bafh.html 一. Openfire Connection Manager 简介 Openfire Conn ...
- Linux基本配置和管理 4 ---- Linux系统启动详解
1 系统启动的流程 BIOS -> MBR+boot code -> 执行引导程序: GRUB -> 加载内核 -> 执行init -> 运行runlevel 2 启动详 ...
- android初级应用到高端架构教程------ 完整体系化学习android开发
系统的学习android开发技术,从应用到底层,再到架构,告别乱糟糟的学习方式,不再是抓不住重点.从上到下贯通,全面学习android开发.让你拥有清晰的思路,一步步学习android开发! 一般而言 ...
- Framework7功能齐全的 iOS7 App 前端框架
Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...
- Error in invoking target 'agent nmhs' of makefile
安装Oracle11g报错:Error in invoking target 'agent nmhs' of makefile 解决方法:cd $ORACLE_HOME/sysman/libvi i ...
- UVA 1617 Laptop
题意: 有n条长度为1的线段,确定他们的起点,必须是整数,使得第i条线段在[ri,di]之间.最后输出空隙的最小值 分析: 原始数据排序,排序的规则是先按照右端点排序,右端点相同的情况下,再按照左端点 ...
- 仅当使用了列的列表并且 IDENTITY_INSERT 为 ON 时,才能为表'SpeType'中的标识列指定显式值
尊重原著作:本文转载自http://blog.163.com/lao12qi12345%40126/blog/static/1179155120101122113316187/ 情况描述 在表Tab ...
- NSString 遍历
遍历NSString网上大多数有两种方法 最简单有效的是: NSString *name=[[NSString alloc] initWithFormat:@"小猫咪爱上大老鼠!!" ...
- (转)在.net中序列化读写xml方法的总结
阅读目录 开始 最简单的使用XML的方法 类型定义与XML结构的映射 使用 XmlElement 使用 XmlAttribute 使用 InnerText 重命名节点名称 列表和数组的序列化 列表和数 ...
- hdu2368Alfredo's Pizza Restaurant
Problem Description Traditionally after the Local Contest, judges and contestants go to their favour ...