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

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

有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控制静态页面之间传递参数获取参数并应用的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS 参数传递的实际应用代码分析

    原因很简单,在DOM中没有id为msg_box的div标签,该怎么解决这个问题呢?方案: 在所有页面公用的头部文件header.tpl.html中写入: 复制代码 代码如下: <script> function changMenu(index){ if(typeof getElementById("msg_box") == "object"){ //如果存在msg_box对象 则刷新该页的对象 showMenu(index); }else{ //如果不存

  • javascript html 静态页面传参数

    复制代码 代码如下: <script> function getParam() { urlInfo=window.location.href; //获取当前页面的url intLen=urlInfo.length; //获取url的长度 offset=urlInfo.indexOf("?"); //设置参数字符串开始的位置 strKeyValue=urlinfo.substr(offset,len); //取出参数字符串 这里会获得类似"id=1"这样的

  • Javascript获取HTML静态页面参数传递值示例

    给大家看一下我的代码 只要把这些代码嵌入到页面文件即可 例一 利用正则表达式来获取 复制代码 代码如下: var LocString = String(window.document.location.href); function getQueryStr(str) { var rs = new RegExp("(^|)" + str + "=([^&]*)(&|$)", "gi").exec(LocString), tmp; i

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

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a页面已经打开,b页面无论是否打开.在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面. 注意:不涉及跨域问题. 想了很久,终于想到了解决方案. 第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面 这是a页面代码: <button>跳转设置</button

  • JS控制静态页面传递参数并获取参数应用

    在项目中遇到这也一个问题: 有a.html和b.html. 1.a页面已经打开,b页面尚未打开,我希望在a页面设置好一些列参数,比如背景色,宽度等参数,传递给b页面,好让b页面在打开就能应用. 2.a页面已经打开,b页面无论是否打开.在a页面需要获取到b页面的一些元素甚至变量,以便于应用到a页面. 注意:不涉及跨域问题. 想了很久,终于想到了解决方案. 第一个问题,我们可以利用html页面锚点的特性,将参数通过url传递给b页面 这是a页面代码: <button>跳转设置</button

  • JavaScript数据在不同页面的传递（URL参数获取）

    JavaScript数据在不同页面的传递（URL参数获取）

            网页中,我们常常遇到这种情况,当我们在某个页面输入信息的时候,会跳转到另一个页面,并且会将我们输入的信息传递到另一个页面中,怎样操作呢? 今天,我们就来实战一下,比如,现在有两个页面,当我们在一个页面输入用户信息的时候,就会跳转到另一个页面并显示,xx欢迎登录的界面. 先来看看设计思路: 第一个登录页面,里面有提交表单, action 提交到index.html页面 第二个页面,可以使用第一个页面的参数,这样实现了一个数据不同页面之间的传递效果 第二个页面之所以可以使用第一个页面

  • 使用vue-router在Vue页面之间传递数据的方法

    前言 几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章.这是在应用程序中探索的一个基本例子. 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面.(不通顺)例如,您遵循 master-detail 模式,其中您有一个数据列表,通过更深入地挖掘可以获得关于列表中特定项的更多信息. 我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据. 如果你还没有读过我之前的教程或者不熟悉 vue-router 库,我建议你温习一下. 利用 U

  • JS中静态页面实现微信分享功能

    微信分享网页的时候,希望分享出来的链接是标题+描述+缩略图,微信开发代码示例里已提供了方法,但只适用于动态页面.我使用phpcms把页面生成了静态文件,示例代码就起不到作用了.在网上找了下,有大神使用ajax实现静态页面也能实现微信分享功能,在这里分享给大家. 前台代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> url=locatio

  • 列举ASP.NET页面之间传递值的几种方式

    1 .列举ASP.NET 页面之间传递值的几种方式. 1).使用QueryString, 如....?id=1; response. Redirect()....  2).使用Session变量  3).使用Server.Transfer 为了在页面之间传递变量内容,ASP.NET给了我们几个选择.一种选择是使用QueryString 属性 一:QueryString. 可以使用查询字符串请求网页.ASP.NET中的QueryString访问此信息.当你加载file.html?x = y时,它解

  • JS实现静态页面搜索并高亮显示功能完整示例

    JS实现静态页面搜索并高亮显示功能完整示例

    本文实例讲述了JS实现静态页面搜索并高亮显示功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS搜索</title> </head> <body> <input id="key-word" class="k

  • js 获取站点应用名的简单实例

    一直用EL表达式${pageContext.request.contextPath}来传递应用名,在用到JS中时,很麻烦,虽然也可以用,但是加大了代码复杂度,因此这里推荐用JS获取应用名 function getContextPath() { var contextPath = document.location.pathname; var index =contextPath.substr(1).indexOf("/"); //这个地方可能有问题,要根据具体项目适当修改 contex

  • jsp页面中两种方法显示当前时间的简单实例

    在jsp页面实现显示当前的日期时间,我们可以用一下两种方式实现: 1. 通过在jsp页面添加Java代码实现,主要代码如下所示 java.text.SimpleDateFormat simpleDateFormat = new java.text.SimpleDateFormat( "yyyy-MM-dd HH:mm:ss"); java.util.Date currentTime = new java.util.Date(); String time = simpleDateForm

  • jQuery实用小技巧_输入框文字获取和失去焦点的简单实例

    jQuery实用小技巧_输入框文字获取和失去焦点的简单实例 <input id="txt" class="text1" type="text" /> <script src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript"> $(function () { $("inp

随机推荐