h5頁面中使用JSBridge需要注意的點
阿新 • • 發佈：2018-11-12
產品提了一個新需求，需要每個h5頁面都具有分享功能，因為在每一個h5頁面中都已經引入了一個公用的檔案(該檔案的主要作用就是引入一個公用的css和js庫)，所以，為了實現分享的功能，在該公用的檔案中加入了分享功能的程式碼。
common.js
<link rel="stylesheet" type="text/css" href="..." />
...
<script type="text/javascript" src="..."></script>
...
<script>
// 分享功能程式碼
</script>
在每個h5檔案的頭部引入了common.js。
在分享功能的程式碼中使用了location.href = 'jsbrigde:'的程式碼，然後發現在該檔案後的js程式碼無法執行。
形如以下例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> <script> location.href = "jsbridge:"; </script> <script> console.log(1); </script> </html>
執行程式碼後，在控制檯中無法輸出1。
經過不斷的嘗試，發現有兩種方法可以正常輸出1:
第一種，將兩個程式碼片段放到一個script下，如：
<script>
location.href = "jsbridge:";
console.log(1);
</script>
第二種，將location.href = "jsbridge:";放到檔案的最後，如：
<script> console.log(1); </script> <script> location.href = "jsbridge:"; </script>
不瞭解JSBridge，所以對於出現這種問題的原因還不知道。
在使用的時候需要注意。