JS实现静态页面之间的参数传递

来源：互联网发布：数据库表怎么设计编辑：程序博客网时间：2024/05/20 02:21

首先说一下所谓静态页面参数传递的意思。

有a.html和b.html两个页面，不通过服务器，只用JS实现，把a页面里面参数传到b页面中去。

正常情况下，只有通过后端服务器才能动态控制模板页面的参数，但是有时候我们需要类似于后端一样的动态操作，又只能前端操作的时候，就需要到了这种传递简单参数的方法。

1.传递参数的页面：send.html

function sendurls(urls,titles,imgurls){

window.open(encodeURI(urls+ "?imgurls="+imgurls +"?artileTitle="+titles),"_self");

</script>

说明：在 a页面创建一个发送参数的函数sendurls(),urls参数是一个地址（这个地址参数在b页面接收后，可作为想链接到的页面的href链接地址）；imgurls参数是一个图片地址参数，artileTitle参数为一段文本（在这里我用为b页面的标题）；_self为在当前页面打开(window.open()默认问为在新窗口打开)。

2.接收参数的页面：gets.html

<div class="content">
<h3 id="lcTitle"></h3>
<img src="" class="pageImg" id="pageImg" alt="">
</div>

<script>

function geturls(){

//获取当前的地址(地址里含有从a页面传递过来的三个参数)

var urlsinfo = window.location.href;

//正则匹配获取的地址，获取图片地址参数。

var imgurls = urlsinfo.split("?")[1].split("=")[1];

//正则匹配获取的地址，获取文本参数。

var articletitle = urlsinfo.split("artileTitle=")[1];

//将接受页面的标题修改为接收到的文本标题参数 decodeURI</span>为地址解码

document.title = decodeURI(articletitle);

/同上-》将文章标题修改为获取的标题文本

document.getElementById('lcTitle').innerHTML = decodeURI(articletitle);

//将图片地址改为获取的图片地址参数

document.getElementById('pageImg').setAttribute("src",imgurls);

</script>

**在b页面的body内添加onload事件，加载这个函数就完成了在a页面点击不同的按钮，动态修改b页面的网页标题，文章标题和图片的功能。

如：<body onload="geturls()">

转载请附加文本地址说明：http://blog.csdn.net/wdzmds

0 0