JS控制静态页面之间传递参数获取参数并应用的简单实例


Posted in Javascript onAugust 10, 2016

在项目中遇到这也一个问题:

有a.html和b.html。

1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用。

2.a页面已经打开,b页面无论是否打开。在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面。

注意:不涉及跨域问题。

想了很久,终于想到了解决方案。

第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面

这是a页面代码:

<button>跳转设置</button> 
 <script> 
 var btn = document.querySelector('button'); 
 console.log(window); 
  
 btn.addEventListener('click', function(){ 
 window.location = 'ci.html#bgc=#369?wd=500' 
 }) 
 </script>

由代码可以知道,点击按钮跳转页面,跳转的url后面多了一系列参数,这个并不会影响跳转的地址,当b页面打开后,可以获取location截取字符串获得变量及变量值,再进行应用。

这是b页面代码:

<div></div> 
 <script> 
 var div = document.querySelector('div'); 
 var bl = window.location.hash.slice(1).split('?'); 
 if(bl.length >= 1){ 
 for(var i = 0; i < bl.length; i += 1){ 
 switch (bl[i].split('=')[0]) { 
 case 'bgc': 
 document.body.style.background = bl[i].split('=')[1]; 
 break; 
 case 'wd': 
 div.style.width = bl[i].split('=')[1] + 'px'; 
 break; 
 default: 
 null; 
 break; 
 } 
 } 
 } 
 </script>

通过截取字符串取得url传递过来的变量应用。成功!

第二个问题,我想的是通过iframe来达到目的,这只是一个障眼法。

在a页面动态创建一个iframe,并设置src值为b页面,display为none。再通过iframe的contentDocument属性获取返回的iframe的文档。

在文档内获取到所需要的元素并应用。

源码:

<span>11111111111</span> 
 <script> 
 var fram = document.createElement('iframe'); 
 fram.src = 'http://www.vip.com/kongzhi/fram2.html'; 
 fram.style.display = 'none'; 
 document.body.appendChild(fram); 
 fram.onload = function(){ 
 var doc = fram.contentDocument || fram.contentWindow.document; 
 var p = doc.querySelector('p'); 
 document.body.appendChild(p); 
 } 
 </script>

以上这篇JS控制静态页面之间传递参数获取参数并应用的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
Jun 07 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
Nov 02 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 #Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 #Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 #Javascript
基于JavaScript实现树形下拉框
Aug 10 #Javascript
关于原生js中bind函数的简单实现
Aug 10 #Javascript
Mvc提交表单的四种方法全程详解
Aug 10 #Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
You might like
php调用shell的方法
2014/11/05 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
Bootstrap模态框插件使用详解
2017/05/11 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
Python实现统计单词出现的个数
2015/05/28 Python
快速入手Python字符编码
2016/08/03 Python
Unicode和Python的中文处理
2017/03/19 Python
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
Python中断多重循环的思路总结
2019/10/04 Python
python实现XML解析的方法解析
2019/11/16 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
电子专业推荐信范文
2013/11/18 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
竞选学委演讲稿
2014/09/13 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
婚宴来宾致辞
2015/07/28 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
vue中div禁止点击事件的实现
2022/04/02 Vue.js