? ? ?這篇文章我會給大家詳細介紹嵌套HTML頁面時，該注意的一些問題。詳細介紹的問題的原因和解決的方案，部分核心代碼我也會貼出來的，希望能給你帶一些幫助。
（PS：本文寫給未做過嵌套app的猿們，有經驗的可直接跳過）
場景一：優化橫豎屏的兼容性
? ? 當我們嵌套網頁時，可能大部分頁面不會做橫屏模式，只是少數頁面需要切換橫豎屏。如果是原生開發，只需要在該ViewController類下shouldAutorotate方法中返回yes or no 即可；但是由于我們的項目是由一個WebView來加載，頁面的跳轉是html本身來控制的，單一的設置shouldAutorotate的返回值只是將全部頁面設置，和我們要的效果不一樣。所以，我們要知道該html頁面具有橫豎屏就可以了。
首先定義一個變量來決定橫豎屏模式，這里我就定義一個NSString 類型的變量，默認值為0（只有豎屏模式），值為1代表（可切換橫豎屏模式）?
- (BOOL)shouldAutorotate{
// NSLog(@"_urlNo2:%@",_urlNow);
if([_urlNow isEqualToString:@"1"]){
return YES;
}else{
return NO;
}
}
接下來我們就來根據實際情況來賦值_urlNow了
1.可以由前端直接通過一個接口傳過來的值來判斷是否橫豎屏，具體實現可看我上篇文章；（優點：可直接由前端控制頁面是否有橫豎屏模式，缺點：如果html頁面是在服務器上，每個頁面就多一個網絡請求）
2.我們可通過具有橫豎屏模式html頁面的名稱來判斷，首先通過webview的代理方法shouldStartLoadWithRequest獲取request.URL.absoluteString，再通過lastPathComponent截取到頁面的名稱，最后得到的名稱即可判斷該頁面是否橫豎屏模式（相應改變_urlNow的0/1）
還沒完呢！！要想做好兼容橫豎屏，我們還需要一步，適配重力感應告訴前端需要切換頁面的橫豎屏模式；
- (void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id)coordinator{? ?
? ?[super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];? ?
? ?[coordinator animateAlongsideTransition:^(idcontext) {? ? ?
? //計算旋轉之后的寬度并賦值? ? ? ?
? ?CGSize screen = [UIScreen mainScreen].bounds.size;? ? ?
? //界面處理邏輯? ? ?
? // self.lineChartView.frame = CGRectMake(0, 30, screen.width, 200.0);? ? ?
? //動畫播放完成之后? ? ?
? if(screen.width > screen.height){? ? ? ? ? ?
? ? NSLog(@"橫屏"); ? ? ? ? ? ? ?
? ? ?NSString *js = [NSString stringWithFormat:@"mobile.playerEvent((\'{\"keyCode\":\"landscape\"}\'))"];? ? ? ? ? ?
NSLog(@"js:%@",js);? ? ? ?
? ? ? [[HomeWebViewController shareManager].webView stringByEvaluatingJavaScriptFromString:js];? ? ? ? }else{? ? ? ? ?
? NSLog(@"豎屏"); ? ? ? ?
? ? ? NSString *js = [NSString stringWithFormat:@"mobile.playerEvent((\'{\"keyCode\":\"portrait\"}\'))"];? ? ? ? ? ?
? ? NSLog(@"js:%@",js);? ? ? ?
? ? [[HomeWebViewController shareManager].webView stringByEvaluatingJavaScriptFromString:js];? ? ? ? }? ? } completion:^(idcontext) {
NSLog(@"動畫播放完之后處理");
}];
}
場景二：嵌套原生視頻播放器
說到視頻播放器，相信大家很熟悉原生開發操作流程。無論是使用<MediaPlayer/MediaPlayer.h>，還是在AVFoundation上建立的AVKit都可以滿足基礎的功能。
接下來介紹網頁嵌套原生播放器！
一般情況下一個嵌套網頁的app，它的底層就是我們那個控制器根View，我們的webView在該根View上。但是現在我們需要另一個View去顯示我們播放器（這里我用a帶指代它），a存在的層級由我們的需要來確定。
網頁嵌套播放器也分兩種情況：
1.視頻播放器上的圖標，進度條由原生實現：
這種情況，播放器上面的操作和顯示是由原生來控制的，所以層級關系是根view>webView>a(a在webview上，webview在view上);
視頻播放那塊的播放器我就不貼代碼了，可以用原生或者第三方播放器框架來實現
（PS：像嵌套開發，我建議直接使用蘋果提供的AVFoundation自定義的播放器AVPlayer）
AVPlayer：可以理解為播放器對象，靈活性好，可以高度化的自定義UI，但它本身不能顯示視頻，顯示需要另一個類AVPlayerLayer來顯示，繼承于CALayer，下面是摘自官方的一段介紹：
AVPlayer works equally well with local and remote media files.
You can display the visual content of items played by an instance of AVPlayer in a CoreAnimation layer of class AVPlayerLayer.
You can observe the status of a player using key-value observing.
主要是說它支持本地/網絡媒體播放，需要CoreAnimation下的AVPlayerLayer來顯示視頻，我們可以通過KVO監聽player的播放狀態。
AVPlayerItem：存有相關媒體信息的類，一個視頻資源對應一個AVPlayerItem對象，當你需要循環播放多個視頻資源時也需創建多個AVPlayerItem對象。建議大家可以多看看官方的英文文檔解釋（題外話）。
An AVPlayerItem represents the presentation state of an asset that’s played by an AVPlayer object, and lets you observe that state.
AVAsset：主要用于獲取多媒體信息，可以理解為一個抽象類，不能直接使用，操作針對它的子類AVURLAsset，根據你視頻的url創建一個包含視頻媒體信息的AVURLAsset對象。
CMTime：還會用到這個媒體時間相關的類，如有不明白可以看之前一個帖子的解釋。
實現了播放器后，我們需要與js交互了，由html調用我們初始化的播放器的接口，傳達的基本參數有（視頻的鏈接url，和視頻播放器的位置【x坐標,y坐標,w寬,h高】）;
2.視頻播放器上的圖標，進度條由html實現（ps：這種雖然比較麻煩，但推薦使用這種方式；做嵌套的視頻通話原理也是這樣）：
這種情況，播放器上面的操作和顯示是由html來控制的，所以層級關系是根view>a? view>webView(a先加在view上，再webview加在view上);
注：需要設置
webView.backgroundColor = [UIColor clearColor]
webView.opaque = NO;
不僅僅html通過js傳達的基本參數（視頻的鏈接url，和視頻播放器的位置【x坐標,y坐標,w寬,h高】），還需要把視頻這層<Div>設置透明色，否則會遮擋視頻。
接下來就是js和oc的交互（比如點擊暫停按鈕調用oc的暫停接口），具體的實現可看我的上篇文章。
寫到這里嵌套原生播放器完成了？？
是的，但是我相信部分人會遇到下面這個問題。
由于我們是嵌套html是大部分由一個控制器（ViewController）來加載，視頻頁面和其他頁面切換時，我們需要手動把視頻播放器暫停后再銷毀了（上面說的a不需要銷毀但需要removeFromSuperview），否則離開播放頁面后視頻仍然在播放可聽到聲音或者那個視頻播放器視圖也一直存在。
最后，我解答部分小伙伴提出的疑惑，蘋果會讓嵌套的web應用能否通過審核？還是說需要部分嵌套部分原生才行？
在這里我很負責的告訴大家沒問題的，蘋果審核團隊不會因為你頁面全部是web實現的打退回來。本人已經上架多個嵌套html的app，包括幫通信運營商開發地頁面全部采用html的iOS App都得到了通過，所以說放心地去做移動端原生嵌套開發！
