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

版权声明:大家一起学习,欢迎转载,转载请注明出处。若有问题,欢迎纠正! https://blog.csdn.net/memory_qianxiao/article/details/84886001

本次解决的内容如标题: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里面的代码,就能实现所需要的功能要求。

猜你喜欢

转载自blog.csdn.net/memory_qianxiao/article/details/84886001