WKWebview與JavaScript 交互(二)監(jiān)聽遠程網(wǎng)頁點擊事件

引言

監(jiān)聽網(wǎng)頁的按鈕的點擊事件,并且網(wǎng)頁不是我們招呼一聲對方就能改的颜启。那么繼續(xù)。

正文

1.WKUserScript

先介紹WebKit框架一個類WKUserScript:

核心方法浪讳,傳入JS代碼字符串缰盏,返回給我們一個WKUserScript對象。

/*! @abstract Returns an initialized user script that can be added to a @link WKUserContentController @/link.
 @param source The script source.
 @param injectionTime When the script should be injected.
 @param forMainFrameOnly Whether the script should be injected into all frames or just the main frame.
 */
- (instancetype)initWithSource:(NSString *)source injectionTime:(WKUserScriptInjectionTime)injectionTime forMainFrameOnly:(BOOL)forMainFrameOnly;

WKUserScriptInjectionTime枚舉

// 兩個枚舉值得解釋

// WKUserScriptInjectionTimeAtDocumentStart Description: Inject the script after the document element is created, but before any other content is loaded.

// WKUserScriptInjectionTimeAtDocumentEnd Description: Inject the script after the document finishes loading, but before other subresources finish loading.

typedef NS_ENUM(NSInteger, WKUserScriptInjectionTime) {
    WKUserScriptInjectionTimeAtDocumentStart,
    WKUserScriptInjectionTimeAtDocumentEnd
} API_AVAILABLE(macosx(10.10), ios(8.0));

它的功能是可以往webview加載的網(wǎng)頁注入JS代碼淹遵。那么我們的問題有望解決了口猜。我們就把我們需要的核心代碼window.webkit.messageHandlers.(messagename).postMessage注入到我們想監(jiān)聽的網(wǎng)頁。

2.找出網(wǎng)頁按鈕的id

這里我們用某知名搜索網(wǎng)站的按鈕做測試透揣。
我們找出網(wǎng)頁按鈕的id济炎,在通過document.getElementById("buttonId");獲取控件對象。
在給控件添加監(jiān)聽button.addEventListener('click',addFun,false);

注意:
(1)有的控件沒有id屬性辐真,可以選擇class屬性獲取getElementsByClassName须尚。遍歷getElementsByClassName返回的集合確定我們需要的控件崖堤。
(2)有些網(wǎng)頁pc端和手機端的域名不一樣。所以找網(wǎng)頁控件的id或class的時候恨闪,同一個網(wǎng)站pc網(wǎng)頁和手機網(wǎng)頁源碼中id或class屬性不一致的情況倘感。

3.準備注入的JS代碼

function fun() {
    window.webkit.messageHandlers.%@.postMessage(null);
}
(function(){
    var btn = document.getElementById("%@");
    btn.addEventListener('click',fun,false);
}());

在OC中,上面代碼以字符串的形式傳給WKUserScript

NSString *scriptStr = [NSString stringWithFormat:@"function fun(){window.webkit.messageHandlers.%@.postMessage(null);}(function(){var btn=document.getElementById(\"%@\");btn.addEventListener('click',fun,false);}());", baiduMessage, baiduButtonId];
WKUserScript *userScript = [[WKUserScript alloc] initWithSource:scriptStr injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
[_userContentController addUserScript:userScript];

4.執(zhí)行結果

點擊網(wǎng)頁按鈕我們的控制臺會打恿省:


執(zhí)行結果

總結

到此我們監(jiān)聽網(wǎng)頁按鈕點擊事件的目的可以實現(xiàn)了老玛,(想看交互本地html的可以去看第一張交互本地html鏈接)。有其他方望分享出來一起學習钧敞。

監(jiān)聽了哪個網(wǎng)頁的按鈕呢蜡豹?建議去看demo工程,到我的Github下載溉苛。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末镜廉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子愚战,更是在濱河造成了極大的恐慌娇唯,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寂玲,死亡現(xiàn)場離奇詭異塔插,居然都是意外死亡,警方通過查閱死者的電腦和手機拓哟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門想许,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人断序,你說我怎么就攤上這事流纹。” “怎么了违诗?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵漱凝,是天一觀的道長。 經(jīng)常有香客問我诸迟,道長茸炒,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任亮蒋,我火速辦了婚禮扣典,結果婚禮上妆毕,老公的妹妹穿的比我還像新娘慎玖。我一直安慰自己,他們只是感情好笛粘,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布趁怔。 她就那樣靜靜地躺著湿硝,像睡著了一般。 火紅的嫁衣襯著肌膚如雪润努。 梳的紋絲不亂的頭發(fā)上关斜,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音铺浇,去河邊找鬼痢畜。 笑死,一個胖子當著我的面吹牛鳍侣,可吹牛的內(nèi)容都是我干的丁稀。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼倚聚,長吁一口氣:“原來是場噩夢啊……” “哼线衫!你這毒婦竟也來了?” 一聲冷哼從身側響起惑折,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤授账,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后惨驶,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體白热,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年敞咧,在試婚紗的時候發(fā)現(xiàn)自己被綠了棘捣。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡休建,死狀恐怖乍恐,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情测砂,我是刑警寧澤茵烈,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站砌些,受9級特大地震影響呜投,放射性物質發(fā)生泄漏。R本人自食惡果不足惜存璃,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一仑荐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧纵东,春花似錦粘招、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽辑甜。三九已至,卻和暖如春袍冷,著一層夾襖步出監(jiān)牢的瞬間磷醋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工胡诗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留邓线,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓煌恢,卻偏偏與公主長得像褂痰,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子症虑,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,504評論 25 707
  • 1缩歪、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_x閱讀 15,968評論 3 119
  • R:《高效演講》片段 I:作者提出,一個好的故事應該由三個部分組成:骨架谍憔、血肉和呈現(xiàn)方式匪蝙。我們首先來說一下骨架。骨...
    柴柴cc閱讀 95評論 0 0
  • ~????v????~????v????~????v????~ 【安安每日閱讀分享】 2018-02-28-Wen...
    安安Ro7cie閱讀 86評論 0 0
  • 月亮躲在一旁傻笑月光透著一絲甜蜜 我在笑容里看到了你的身影 怎么現(xiàn)在才發(fā)現(xiàn)你的聲音原來如此動聽因為已好久沒聽到了 ...
    心花園子閱讀 290評論 3 3