如何通过在离子应用程序中单击 InAppBrowser 中的按钮调用函数？答案

【问题标题】：How to call a function from a button click in an InAppBrowser back in ionic App?如何通过在离子应用程序中单击 InAppBrowser 中的按钮调用函数？
【发布时间】：2021-07-13 14:42:43
【问题描述】：

我有一个离子应用程序，我试图在其中调用一个调用 InAppBrowser 的方法。浏览器实例保存在本地变量中，用于调用executeScript在网页上插入按钮。

现在我需要单击按钮并将一个事件触发回 ionic 应用程序。其中调用close方法关闭当前运行的inAppBrowser实例。

我如何能够传达用户点击了 inappbrowser 上的任何按钮并在点击 inAppbrowser 上的按钮时调用 ionic 应用程序中的任何方法。

openWebpage() {

    let browser = this.iab.create('https://www.google.com', '_blank'
      , {
        closebuttoncolor: "#ffffff",
        lefttoright: 'yes',
        hideurlbar: 'yes',
        fullscreen: 'yes',
        hardwareback: 'no',
        toolbarcolor: '#145a7b',
        zoom: 'no',
        useWideViewPort: 'no',
        hidenavigationbuttons: 'yes',
        footer: 'no',
        message: "Hello",
        toolbar : 'no',
        location: 'no'
      }
    );
 

    browser.on('loadstop').subscribe(() => {

      browser.executeScript({ code: "(function() { var body = document.querySelector('body'); var button = document.createElement('div'); button.innerHTML = 'Need Help'; button.classList.add('need_help'); body.appendChild(button);  })();" });
      browser.executeScript({ code: "(function() { var body = document.querySelector('body'); var button = document.createElement('div'); button.setAttribute('id','customBackbtn');button.innerHTML = '< Back'; button.classList.add('back_btn'); body.appendChild(button);  } )(   );" },);
    browser.executeScript({
        code: "document.getElementById('customBackbtn').onclick = function() { //Adding functionality here to somehow close browser}"
    })
    
      browser.insertCSS({ code: ".need_help {position: absolute;font-size: 22px;top: 0px;left: 50%;transform: translate(-50%);display: flex;justify-content: center;align-items: center ;height: 75px;color: white;background: #145a7b;width: 100%;} .back_btn {  text-decoration: underline;position: absolute; display:flex;align-items: center;height: 75px;font-size: 22px; top: 0px; left: 20px;color:#FFFFFF } #myvoya-sso-ui {padding-top: 75px;}" });
           
    });
  }

【问题讨论】：

标签： javascript angularjs angular ionic-framework

【解决方案1】：

您可以包含指向您的项目的深层链接并调用 window.open(yourcustomUrl)，您将被重定向回您的应用

【讨论】：

感谢您的建议，但我正在努力避免任何其他真正的方法来解决这个问题。当我们点击浏览器本身的 DOM 中的任何其他元素时，我只需要关闭浏览器按钮来触发事件。

【解决方案2】：

经过研究，我能够实现该功能：

我们必须使用来自应用内浏览器的发布消息来监听 inAppBrowser 中的事件，并使用 inAppBrowser 上的消息事件，我们可以在我们的 ionic 应用端捕获消息。

HTML 文件中的代码：

  <ion-button (click)="openWebpage()">Open InAppBrowser</ion-button>

TS 文件中的代码：

openWebpage() {
    let browser = this.iab.create('https://www.google.com/', '_blank'
      , {
        closebuttoncolor: "#ffffff",
        lefttoright: 'yes',
        hideurlbar: 'yes',
        fullscreen: 'yes',
        hardwareback: 'no',
        toolbarcolor: '#145a7b',
        zoom: 'no',
        useWideViewPort: 'no',
        hidenavigationbuttons: 'yes',
        footer: 'no',
        message: "Hello",
        toolbar : 'no',
        location: 'no'
      }
    );

    browser.on('loadstop').subscribe(() => {
      browser.executeScript({ code: "(function() { var body = document.querySelector('body'); var button = document.createElement('div'); button.innerHTML = 'Header'; button.classList.add('header'); body.appendChild(button);  })();" });
      browser.executeScript({ code: "(function() { var body = document.querySelector('body'); var button = document.createElement('div'); button.setAttribute('id','customBackbtn');button.innerHTML = '< Back'; button.classList.add('back_btn'); button.onclick = function () { }; body.appendChild(button);  } )(   );" },);
      browser.executeScript({
        code: "document.getElementById('customBackbtn').onclick = function() {\
        var message = 'close';\
            var messageObj = {message: message};\
            var stringifiedMessageObj = JSON.stringify(messageObj);\
        webkit.messageHandlers.cordova_iab.postMessage('stringifiedMessageObj');\
      }"});
    
      browser.insertCSS({ code: ".header {position: absolute;font-size: 22px;top: 0px;left: 50%;transform: translate(-50%);display: flex;justify-content: center;align-items: center ;height: 75px;color: white;background: #145a7b;width: 100%;} .back_btn {  text-decoration: underline;position: absolute; display:flex;align-items: center;height: 75px;font-size: 22px; top: 0px; left: 20px;color:#FFFFFF } #myvoya-sso-ui {padding-top: 75px;}" });
    });

    browser.on('message').subscribe((val)=>{
      const postObject:any = val;
      if(postObject.data.message == 'close'){
         browser.close();
      }
    });
  }

【讨论】：