html5之间跳转页面传参，获取数据以及跳转后就执行页面的js代码

蔚落 2022-04-06 03:52 262阅读 0赞

本次解决的内容如标题：html5之间跳转页面传数据以及跳转后就执行页面的js代码

举个我的栗子：就是点击视频图片描述后，跳转到播放该视频的h5，因为跳转后视频播放页面video标签需要播放地址，一个视频的话可以写死地址，多个视频的话，就要想写几十个h5...想想就难受，所以就需要两个网页之间有数据交流，第一个页面有多个视频的各自的描述以及图片组合的超链接（a标签），点击就会跳转到播放页面，然后播放。

**我的思路就是点击连接的时候，把地址信息传过去，然后播放页面动态获取地址，用js,或者jquery动态添加到video标签中。就不用写那么多网页。这里主要解决三个问题：1.两个网页之间的传参  2.怎么获取另一个网页传来的数据  3.获取地址后添加到video标签的src属性中，就能用video的controls就能控制播放，音量，暂停....**

下面就是解决的过程：感谢以下博主提供内容参考：

愤怒的火柴：[https://blog.csdn.net/caoyuan10036/article/details/7227214][https_blog.csdn.net_caoyuan10036_article_details_7227214]（在静态页面html中跳转传值）

博客之家：[https://www.jb51.net/article/54902.htm][https_www.jb51.net_article_54902.htm] （页面加载完后自动执行一个方法的js代码）

一：首先跳转页面传参数

第一个页面是2张图片和文字组合出来的连接，以下是h5代码和效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbW9yeV9xaWFueGlhbw_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    
    
    
        <a href="index.html?media/逍遥叹.mp4">
            <img src="media/4.png" alt="">
            <p>逍遥叹</p>
        </a>
        <a href="index.html?media/我还是很喜欢你.mp4">
            <img src="media/1.png" alt="">
            <p>我还是很喜欢你</p>
        </a>
    
    
    </div>
    </body>
    </html>

**在连接a标签中index.html是播放页面，?后面是视频的地址，就是传到跳转页面的数据，当点击图片或者文字就会跳转到播放页面。如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbW9yeV9xaWFueGlhbw_size_16_color_FFFFFF_t_70 1][]

二：获取url中传过来的数据：**由于一些博主写的太详细，代码太长，尤其抓取信息的Jquery，就自己写了6行的jquey实现功能（用到window.loaction.searc会抓取传过来的url的数据，当然也包括？，所以需要重新提取地址，把?去掉就可以，提取方式多样）。**

jsvascript：用来抓取url传过来的数据

播放页面的html5：很多样式代码不用管，这里只需要video标签和jquery的文件就行

<!DOCTYPE html>
    <html lang="zh">
    <head>
    	<meta charset="UTF-8">
    	<title></title>
    	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
    	<link rel="stylesheet" href="dist/css/ckin.css">
    	<link rel="stylesheet" href="css/demo.css">
    	<script src="jquery-3.3.1.min.js"></script>
    	<script>
    	function f() {
    	    var locfile="";
    	    var info=window.location.search;
    		for(var i=1;i<info.length;i++)
    	    locfile+=info[i];
    		$("video")[0].src=locfile;
        }
    	</script>
    </head>
    <body onload="f()">
    
    	<div class="container">
    		<h2 class="title heading">爱已走到尽头，知己难逢几人留</h2>
    		<video poster="" src="" data-ckin="default" data-overlay="1"></video>
    	</div>
    
    
    </body>
    <script src="dist/js/ckin.js"></script>
    </html>

三：页面加载完后自动执行一个方法的js代码

跳转后就要自动加载地址，形成video能够播放的视屏，第二步那里放的h5就是最后的成果。但是没说原因。

提取后地址就要自动添加到video中src中，需要js自动自行，平常写的都是事件触发才执行js，怎么自动执行？

答案就是：

**在body中用onload:<body οnlοad="myfunction()">**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbW9yeV9xaWFueGlhbw_size_16_color_FFFFFF_t_70 2][]

就是上面第二个h5里面的代码，就能实现所需要的功能要求。

\-------------------------------------------------------------------------内容截止线---------------------------------------------------------------------------------

\----------------------------------------------------------------------------图片分割线------------------------------------------------------------------------------

![20190504214209969.gif][]

![2019050421420816.gif][]

[https_blog.csdn.net_caoyuan10036_article_details_7227214]: https://blog.csdn.net/caoyuan10036/article/details/7227214
[https_www.jb51.net_article_54902.htm]: https://www.jb51.net/article/54902.htm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbW9yeV9xaWFueGlhbw_size_16_color_FFFFFF_t_70]: /images/20220406/ed1d851afa0448e9af9322fa4df63b7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbW9yeV9xaWFueGlhbw_size_16_color_FFFFFF_t_70 1]: /images/20220406/6714b152090c4b7aaa58b29657384f32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbW9yeV9xaWFueGlhbw_size_16_color_FFFFFF_t_70 2]: /images/20220406/6f94a432e71d4b8c9314b26df807c6c9.png
[20190504214209969.gif]: /images/20220406/8138c2d50c414c56ab38b72bca0dec4d.png
[2019050421420816.gif]: /images/20220406/0df58816c3894d4fa586ceab8e31ebc8.png