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