html5之間跳轉頁面傳,獲取數據以及跳轉後就執行頁面的js代碼

本次解決的內容如標題: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裏面的代碼,就能實現所需要的功能要求。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章