基於JavaScript程式碼去掉H5頁面中的頭尾及廣告部分(支援 Android 和 iOS)
阿新 • • 發佈:2019-01-22
提出問題:
APP中嵌入一個H5的網頁,但出現的廣告條或是無關頭尾,相當大煞風景,該如何去掉?
分析問題:
1,加入廣告條是為了讓網站存活下去,這個普通使用者無法理解,就此點到為止吧;
2,大多H5頭尾部分都用<div> 方式來包裹,裡面是以id 或 class 來標示;
3,嵌入webview 一段JavaScript程式碼來隱藏,目前Android和iOS都支援此方法;
瞭解技術點:
1,iOS 控制元件UIWebView 本身支援嵌入一段JavaScript程式碼來實現和原生網頁互動,相關知識點請自行查詢,這裡不再贅述;
2,Android 元件WebView 需要先設定其支援JavaScript,其餘知識和iOS基本一樣,通過回撥或代理來設定;
程式碼實戰:
這裡只分享核心的一段程式碼,分為 <div id> 和 <div class> 兩種情況,下面是兩個平臺,功能一樣的程式碼片段;
iOS 程式碼
Android程式碼
總結一下:
每一次的技術分享,都經歷了無數次的測試和查詢,不管怎麼樣,記錄下來給以後的自己看或是有需求的朋友看,都是很美妙的,作為開發者,技術分享,我們是認真的。