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 获取当前时间戳的代码
Aug 05 Javascript
两个数组去重的JS代码
Dec 04 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
Feb 10 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
Sep 05 Javascript
vue实现div单选多选功能
Jul 16 Javascript
基于JavaScript实现树形下拉框
Aug 10 #Javascript
关于原生js中bind函数的简单实现
Aug 10 #Javascript
Mvc提交表单的四种方法全程详解
Aug 10 #Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 #Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 #Javascript
浅谈jQuery中的checkbox问题
Aug 10 #Javascript
jQuery实现将div中滚动条滚动到指定位置的方法
Aug 10 #Javascript
You might like
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP把空格、换行符、中文逗号等替换成英文逗号的正则表达式
2014/05/04 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jquery与js函数冲突的两种解决方法
2013/09/09 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JS 实现列表与多选框选择附预览动画
2014/10/29 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
python中Apriori算法实现讲解
2017/12/10 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python版DDOS攻击脚本
2019/06/12 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
UDP协议功能
2013/01/06 面试题
如何进行有效的自我评价
2013/09/27 职场文书
环境建设实施方案
2014/03/14 职场文书
美术指导助理求职信
2014/04/20 职场文书
优秀会计求职信
2014/07/04 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
工作失误检讨书(经典集锦版)
2014/10/17 职场文书
护理实习生带教计划
2015/01/16 职场文书