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

有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控制静态页面之间传递参数获取参数并应用的更多相关文章

  1. JS多个函数之间传递参数问题

    JS多个函数之间传递参数的一个重要思想是在页面定义一个隐藏域,当第一个函数请求到数据时候修改隐藏域的值,第二个函数用jQuery的选择器选择页面中隐藏域的值. 比如: 页面中定义一个隐藏的页号. &l ...

  2. JSP页面之间传递参数的方法有哪些?

    JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接

  3. [Windows Phone学习笔记]页面之间传递对象

    在Windows Phone中,页面之间传递参数就类似Web开发中一样,通过QueryString的形式进行传递,但是如果需要传递对象,则无法通过QueryString形式了,其实也可以,把对象序列化 ...

  4. ASP.NET页面之间传递值的几种方式(转载)

    页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryString,Session,Cookie ...

  5. spring boot 之如何在两个页面之间传递值(转)

    原文地址:spring boot 之如何在两个页面之间传递值 问题:页面之间的跳转,通常带有值的传输,但是,在现在比较流行的SPRING MVC WEB 开发模型中,设计机制导致页面之间的直接接跳转和 ...

  6. ASP中页面之间传递值的几种方式

    ASP.NET页面之间传递值的几种方式 页面传值是学习asp.net初期都会面临的一个问题,总的来说有页面传值.存储对象传值.ajax.类.model.表单等.但是一般来说,常用的较简单有QueryS ...

  7. 【js】【图片显示】js控制html页面显示图片方式

    js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...

  8. js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得

    js脚本捕获页面 GET 方式请求的参数?其实直接使用 window.location.search 获得

  9. 使用session在jsp页面之间传递多维数组,用于实现全局变量的效果

    使用session在jsp页面之间传递多维数组:发送数据的jsp页面:int [][] form_number=new int[4][4]; session.setAttribute("se ...

随机推荐

  1. openfire研究之部署连接管理器(connection manager)

    http://blog.sina.com.cn/s/blog_7325f5150101bafh.html 一. Openfire Connection Manager 简介 Openfire Conn ...

  2. Linux基本配置和管理 4 ---- Linux系统启动详解

    1 系统启动的流程 BIOS -> MBR+boot code -> 执行引导程序: GRUB -> 加载内核 -> 执行init -> 运行runlevel 2 启动详 ...

  3. android初级应用到高端架构教程------ 完整体系化学习android开发

    系统的学习android开发技术,从应用到底层,再到架构,告别乱糟糟的学习方式,不再是抓不住重点.从上到下贯通,全面学习android开发.让你拥有清晰的思路,一步步学习android开发! 一般而言 ...

  4. Framework7功能齐全的 iOS7 App 前端框架

    Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序. Framework7 允许您灵活搭建列表视图(表视图) .你可以让他们作为导航菜单,你可以在列表里面使用图标,输 ...

  5. Error in invoking target 'agent nmhs' of makefile

    安装Oracle11g报错:Error in invoking target 'agent nmhs' of makefile  解决方法:cd $ORACLE_HOME/sysman/libvi i ...

  6. UVA 1617 Laptop

    题意: 有n条长度为1的线段,确定他们的起点,必须是整数,使得第i条线段在[ri,di]之间.最后输出空隙的最小值 分析: 原始数据排序,排序的规则是先按照右端点排序,右端点相同的情况下,再按照左端点 ...

  7. 仅当使用了列的列表并且 IDENTITY_INSERT 为 ON 时,才能为表'SpeType'中的标识列指定显式值

     尊重原著作:本文转载自http://blog.163.com/lao12qi12345%40126/blog/static/1179155120101122113316187/ 情况描述 在表Tab ...

  8. NSString 遍历

    遍历NSString网上大多数有两种方法 最简单有效的是: NSString *name=[[NSString alloc] initWithFormat:@"小猫咪爱上大老鼠!!" ...

  9. (转)在.net中序列化读写xml方法的总结

    阅读目录 开始 最简单的使用XML的方法 类型定义与XML结构的映射 使用 XmlElement 使用 XmlAttribute 使用 InnerText 重命名节点名称 列表和数组的序列化 列表和数 ...

  10. hdu2368Alfredo's Pizza Restaurant

    Problem Description Traditionally after the Local Contest, judges and contestants go to their favour ...