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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
javascript操作excel生成报表示例
May 08 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
ES6中箭头函数的定义与调用方式详解
Jun 02 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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中生成随机密码的自定义函数代码
2013/10/21 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
浅析ThinkPHP中execute和query方法的区别
2014/06/13 PHP
ThinkPHP 表单自动验证运用示例
2014/10/13 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
node.js中使用node-schedule实现定时任务实例
2014/06/03 Javascript
js的[defer]和[async]属性
2014/11/24 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
vue弹出框组件封装实例代码
2019/10/31 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
基于vue和websocket的多人在线聊天室
2020/02/01 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
《油菜花开了》教学反思
2014/02/22 职场文书
2014年迎新年联欢会活动策划方案
2014/02/26 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
对照检查剖析材料
2014/09/30 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2015年信访工作总结
2015/04/07 职场文书
2015年国庆节广播稿
2015/08/19 职场文书