Ionic InAppBrowser iOS端加载远程网页显示空白问题

问题概述 #

Ionic应用中使用InAppBrowser加载远程结算页面，Android端运行正常，但iOS构建版本页面显示空白。

相关代码 #

var browser = InAppBrowser.create( 
  wpcDomain + 'checkout/?id='+user.id+'&cookie='+user.cookie+'&add-to-cart='+ _cartIds.join(',') +'&quantity='+ quantity.join(',')+${getIdsForCheckout(variation_ids, 'variation_id')}+'&wpc_mobile_checkout=true', 
  "_blank", 
  InAppBrowserOptions 
);

if(browser){
    browser.on('loadstop')?.subscribe(event => {
        browser.executeScript({
            code: "if(window.location.href.includes('wpc_mobile_thankyou=true')){  var x = document.getElementsByClassName('wpc-primary'); x[0].addEventListener('click', function(){ window.webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({message: 'fdafda'})) })};"
        },
        function(values) {
        });
    });

    browser.on('loadstart', loadStartCallBack);
    function loadStartCallBack() {
        document.querySelector('body').innerHTML = "Loading please wait ...";
    }

    browser.on('message')?.subscribe((event) => {
        browser.close();
        browser = undefined;
        router.push('/order-history');
        EmptyCart({dispatch});
    })
}

日志信息 #

To Native Cordova -> InAppBrowser open InAppBrowser168748626 ["options": [https://demo.cafeapp.com/apps/app/checkout/?id=10&wpc_mobile_checkout=true, _blank, location=no,zoom=no,hideurlbar=yes,closebuttoncaption=Close,clearcache=yes,animated=no]] 
2022-12-13 09:52:20.288260+0600 App[16431:563704] Setting the WebView's frame to {{0, 0}, {414, 852}} 
2022-12-13 09:52:20.849213+0600 App[16431:563704] Unbalanced calls to begin/end appearance transitions for <UIViewController: 0x140d310f0>.

排查方向与解决办法 #

• 修正URL参数编码：iOS WebView对URL中的特殊字符敏感，需对动态参数（如user.cookie、_cartIds）使用encodeURIComponent编码，避免参数解析错误导致页面无法加载。示例：

  var encodedCookie = encodeURIComponent(user.cookie);
  var encodedCartIds = encodeURIComponent(_cartIds.join(','));
  // 其他参数同理处理后拼接URL
  

• 移除视图过渡冲突代码：日志中的Unbalanced calls to begin/end appearance transitions警告，是因为loadStartCallBack中修改原应用的body内容，干扰了iOS视图控制器的切换流程。注释或删除该回调内的代码：

  // browser.on('loadstart', loadStartCallBack);
  // function loadStartCallBack() {
  //     document.querySelector('body').innerHTML = "Loading please wait ...";
  // }
  

• 调整InAppBrowser配置：在选项中添加clearsessioncache=yes，并检查是否存在iOS不兼容的选项。修改后的选项示例：

  const InAppBrowserOptions = 'location=no,zoom=no,hideurlbar=yes,closebuttoncaption=Close,clearcache=yes,clearsessioncache=yes,animated=no';
  

• 配置iOS ATS权限：确保远程域名在config.xml中配置了App Transport Security例外，允许HTTPS加载（若页面包含混合内容需额外配置）：

  <edit-config file="*-Info.plist" mode="merge" target="NSAppTransportSecurity">
    <dict>
      <key>NSExceptionDomains</key>
      <dict>
        <key>demo.cafeapp.com</key>
        <dict>
          <key>NSIncludesSubdomains</key>
          <true/>
          <key>NSAllowsArbitraryLoads</key>
          <true/>
        </dict>
      </dict>
    </dict>
  </edit-config>
  

• 验证网页iOS兼容性：直接在iOS Safari中打开日志中的目标URL，确认网页本身能正常加载，排除网页端的iOS适配问题。
• 检查脚本执行逻辑：确保executeScript中的代码在iOS环境下兼容，比如window.webkit.messageHandlers.cordova_iab是否存在，可添加判断避免报错阻塞页面：

  code: "if(window.location.href.includes('wpc_mobile_thankyou=true') && window.webkit?.messageHandlers?.cordova_iab){  var x = document.getElementsByClassName('wpc-primary'); if(x.length > 0) x[0].addEventListener('click', function(){ window.webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({message: 'fdafda'})) })};"
  

内容的提问来源于stack exchange，提问作者Ab Rasel