文库网
关注排行榜

当前无数据...

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

目标需求:

实现将上一个页面的值传入下一个页面中。

分析:

通过修改外链JS的全局变量无法达到效果,在上个页面修改后,加载到新的页面数据却重置了,百度说可以JS再外链JS,试了也不好使(极大可能是方法没用对),所以本篇讲的是通过在url后加值来达到传输的效果。

具体实现:

首先,跨页面传值肯定是页面跳转时传输值,将a标签的href后加“?”后加数值。当然,?这玩意本来应该不是这么用的,只是这里这样写了而已,加问号之后,页面也能正常加载。a标签如下:

  1. <code class="prism language-javascript"> <a href="phoneshow.html?id=0"></a>
  2. </code>
复制代码

当然你也可以“?”后面跟很多东西,这都随你。

然后新页面的JS中加入以下方法:

  1. <code class="prism language-javascript"> function addphonetip(){
  2. //获取当前路径并切割ID
  3. var url = window.location.href;
  4. var phoneid = url.split("?")[1];
  5. //获取当前ID的手机信息字符串
  6. phoneid = phoneid.replace("id=","").trim();
  7. //获取并显示————手机名称
  8. phonename = phones[phoneid].split(" ")[0];
  9. document.getElementById("phonename").innerHTML = phonename.replace(/_/g," ");
  10. //获取并显示————手机价格
  11. Price = phones[phoneid].split(" ")[2];
  12. document.getElementById("Price").innerHTML = Price;
  13. //获取并显示————手机描述
  14. phonenamemini = phones[phoneid].split(" ")[1];
  15. document.getElementById("phonenamemini").innerHTML = phonenamemini;
  16. //获取并显示————手机图片路径
  17. var phonesrc = "./img/"+phonename.replace(/_/g," ")+".png";
  18. var phoneimg = document.getElementById("phoneimg");
  19. phoneimg.src = phonesrc;
  20. }
  21. </code>
复制代码

这里解释一下,url是获取当前页面的href,包括"?"之后的。
然后按“?”切割,获取“id=n”。
将“id=”替换为空,再将字符串去空格,获得n。
再根据n获取数组phones中的指定项。
这里phones是我的数组名,你写的时候换成你的。这里数组是外链的JS,下面会再提到。
之后就是按空格切割内容,将手机的名称呀,价格呀,描述呀,都赋值给对应标签的innerHTML属性,当然图片是src属性。
这里我用的是一维数组,每个手机的信息都是用空格拼凑起来的,所以这里用空格切割了一下。当然直接用二维数组也行,用JSON更好,只是我不会用,这里就不再累述了。

提一下外链的JS,外链的格式忘了的话也不用再百度了,下面给了:

  1. <code class="prism language-javascript"> <script language="javascript" type="text/javascript" src="js/myphone.js"></script>
  2. </code>
复制代码

路径换成你们的就好,里面定义一些数组和公用方法,如:

  1. <code class="prism language-javascript"> var phones = [ "iQOO_Neo3 8GB+128GB/144Hz高刷竞速屏 2998 ",
  2. "vivo_Z6_5G 6GB+128GB/骁龙765G 2298",
  3. "iQOO3_5G版 12GB+128GB/55W超快闪充 3998",
  4. "vivo_S6_5G版 双模5G/4500mAh大电池 2698",
  5. "iQOO_Pro_5G版 5G全网通/骁龙855 Plus 3298",
  6. "vivo_S5 菱感四摄/极点屏 1998",
  7. "vivo_Y50 5000mAh超强续航 1698",
  8. "vivo_U3x 6GB+64GB/大电池/双引擎 999",
  9. "NEX_3S_5G版 8GB+256GB/高通骁龙865 4998",
  10. "vivo_X30_5G版 双模5G全网通/20倍变焦 3298",
  11. "vivo_Z5 4500mAh大电池 1498" ];
  12. //初始化需要跳转的手机id
  13. var showphonenumber = -1;
  14. //转到手机详情界面方法,传入num值,打开新窗体时路径后加?id=num,以达到跨页面传值的效果
  15. //其中window.location.href为在本页面打开,window.open为在新页面打开
  16. function showphone(num){
  17. showphonenumber = num;
  18. window.location.href='phone.html?id='+showphonenumber;
  19. //window.open('phone.html?id='+showphonenumber);
  20. }
  21. </code>
复制代码

当然了,示例的方法你用不到就不用复制,数组你们自己定义就好。

下面给两张样张图:

{tilte}-疯吖疯

这张就是没有id的,就是这个页面的框架,各个标签都等待修改值。

{tilte}-疯吖疯

这张就是有id的,按上述方法对各个标签分别重新定义的效果。

对了,还有一点,上面的addphonetip方法不要写在window.onload里,可以写在document.addEventListener里,当然你也不用再百度了,下面给了:

  1. <code class="prism language-javascript"> //文档初始化事件,window.onload是表示文档结构已经加载完成(不包含图片等非文字媒体文件)
  2. if (document.addEventListener) {
  3. document.addEventListener ("DOMContentLoaded", addphonetip, false);
  4. }
  5. </code>
复制代码

其中的第二个值就是方法名,第三个false我也不知道是什么,你可以改改试试,我没试过。

有同学就会问了,window.onload和document.addEventListener有什么区别?你也不用再百度了。

{tilte}-疯吖疯

大致就是window.onload需要所有内容都加载完毕之后再执行,而document.addEventListener不需要文档全部加载完成便可执行,说人话就是document.addEventListener更快。

结语:

全篇内容仅供参考,只是我这种小白能用这种方法实现,但不代表这种方法或这样使用的行为就是正确的。

如果你觉得对你有帮助就请点个赞,关注更好,嘿嘿,谢谢。如有描述错误或不足,还望指正。


本站资源均由网上搜集或网友上传提供,内容仅供观摩学习交流之用,本站将不对任何资源负法律责任.如有侵犯您的版权,请及时联系我们(邮箱:892481490@qq.com,客服QQ:892481490),我们会尽快处理!QQ350550790是骗子,注意不要和他交易!!!
发帖求助前要善用【论坛搜索】功能, 那里可能会有你要找的答案,也能为你节约不少学习时间;
如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加(威望)和(贡献)而不会扣除自己的积分。
如发现灌水帖、病毒木马帖、广告帖、工具不能正常使用、网盘链接失效,请点击【举报】 核实有几率会给予额外的B币奖励哦!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    发布资源 快速回复 返回列表 客服中心 官方QQ群

    QQ|小黑屋|手机版|编程之家论坛 ( 桂ICP备18002029号 )

    Powered by 编程之家  © 20019-2021