本次解决的内容如标题:html5之间跳转页面传数据以及跳转后就执行页面的js代码
举个我的栗子:就是点击视频图片描述后,跳转到播放该视频的h5,因为跳转后视频播放页面video标签需要播放地址,一个视频的话可以写死地址,多个视频的话,就要想写几十个h5...想想就难受,所以就需要两个网页之间有数据交流,第一个页面有多个视频的各自的描述以及图片组合的超链接(a标签),点击就会跳转到播放页面,然后播放。
我的思路就是点击连接的时候,把地址信息传过去,然后播放页面动态获取地址,用js,或者jquery动态添加到video标签中。就不用写那么多网页。这里主要解决三个问题:1.两个网页之间的传参 2.怎么获取另一个网页传来的数据 3.获取地址后添加到video标签的src属性中,就能用video的controls就能控制播放,音量,暂停....
下面就是解决的过程:感谢以下博主提供内容参考:
愤怒的火柴:https://blog.csdn.net/caoyuan10036/article/details/7227214(在静态页面html中跳转传值)
博客之家:https://www.jb51.net/article/54902.htm (页面加载完后自动执行一个方法的js代码)
一:首先跳转页面传参数
第一个页面是2张图片和文字组合出来的连接,以下是h5代码和效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!--<h1 style="text-align:center;color:blue">优质视频推荐</h1>-->
<!--<div class="videobox" style="text-align:center">-->
<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>
<!--<video src="media/逍遥叹.mp4" controls></video>-->
</div>
</body>
</html>
在连接a标签中index.html是播放页面,?后面是视频的地址,就是传到跳转页面的数据,当点击图片或者文字就会跳转到播放页面。如下:
二:获取url中传过来的数据:由于一些博主写的太详细,代码太长,尤其抓取信息的Jquery,就自己写了6行的jquey实现功能(用到window.loaction.searc会抓取传过来的url的数据,当然也包括?,所以需要重新提取地址,把?去掉就可以,提取方式多样)。
jsvascript:用来抓取url传过来的数据
<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>
播放页面的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 onload="myfunction()">
就是上面第二个h5里面的代码,就能实现所需要的功能要求。