如何隐藏/禁用 Ionic inapp 浏览器顶部地址栏？

Question

我在我的应用程序中实现了 ionic inapp 浏览器。我想隐藏它的顶部栏。我正在尝试使用以下代码，但它似乎不起作用。

page.ts代码

  openWebpage(url: string) {
    const browser = this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self','toolbar=no');
    const options: InAppBrowserOptions = {
      zoom: 'no',
      location: 'no',
      toolbar: 'no'
    }

  }

我已经添加了 toolbar=no 但顶部地址栏仍然可见。

Answer 1

您分享的代码就是您用来创建inAppBrowser的代码？如果是这样，您需要在创建 inAppBrowser 之前声明您的选项 const：

openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no',
      location: 'no',
      toolbar: 'no'
    };
    const browser = this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self','toolbar=no');
  }

这样我就可以打开浏览器 window 而没有 URL 栏。

使用 'toolbar=no' 也是错误的，因为工具栏是选项之一属性并且它需要是一个字符串，工具栏不需要是字符串的一部分。另一种方法是简单地使用一个位置为属性:

的对象

this.inAppBrowser.create('http://sco7.com/filemanager/sapphire/','_self',{ toolbar: 'no'});

希望对您有所帮助。

Answer 2

Either you can apply InAppBrowserOptions in in-app-browser

  private openBrowser(url: string, title?: string) {
    let options: InAppBrowserOptions = {
      toolbarcolor: "#488aff",
      hideurlbar: "yes",
      closebuttoncolor: "#fff",
      navigationbuttoncolor: "#fff"
    };
    const browser = this.iab.create(url, "_blank", options);
  }

or you can use the highly customizable themeable-browser which built on top of in-app-browser

// can add options from the original InAppBrowser in a JavaScript object form (not string)
// This options object also takes additional parameters introduced by the ThemeableBrowser plugin
// This example only shows the additional parameters for ThemeableBrowser
// Note that that `image` and `imagePressed` values refer to resources that are stored in your app
const options: ThemeableBrowserOptions = {
     statusbar: {
         color: '#ffffffff'
     },
     toolbar: {
         height: 44,
         color: '#f0f0f0ff'
     },
     title: {
         color: '#003264ff',
         showPageTitle: true
     },
     backButton: {
         image: 'back',
         imagePressed: 'back_pressed',
         align: 'left',
         event: 'backPressed'
     },
     forwardButton: {
         image: 'forward',
         imagePressed: 'forward_pressed',
         align: 'left',
         event: 'forwardPressed'
     },
     closeButton: {
         image: 'close',
         imagePressed: 'close_pressed',
         align: 'left',
         event: 'closePressed'
     },
     customButtons: [
         {
             image: 'share',
             imagePressed: 'share_pressed',
             align: 'right',
             event: 'sharePressed'
         }
     ],
     menu: {
         image: 'menu',
         imagePressed: 'menu_pressed',
         title: 'Test',
         cancel: 'Cancel',
         align: 'right',
         items: [
             {
                 event: 'helloPressed',
                 label: 'Hello World!'
             },
             {
                 event: 'testPressed',
                 label: 'Test!'
             }
         ]
     },
     backButtonCanClose: true
};

const browser: ThemeableBrowserObject = this.themeableBrowser.create('https://ionic.io', '_blank', options);

Answer 3

openWebpage(url: string) {
    const options: InAppBrowserOptions = {
      zoom: 'no',
      fullscreen: "yes",
      hidenavigationbuttons: "no",
      toolbar:'no',
      hideurlbar: 'yes',
    }

    // Opening a URL and returning an InAppBrowserObject
    const browser = this.inAppBrowser.create(url, '_blank',{ toolbar: 'no',  hideurlbar: 'yes',
    fullscreen: "yes",location:"no", options});

    browser.on('loadstop').subscribe(event => {
      browser.insertCSS({ code: "toolbar{display: none;" });
    });


   // Inject scripts, css and more with browser.X
    }

像这样，你想隐藏或控制的东西就会出现！

如何隐藏/禁用 Ionic inapp 浏览器顶部地址栏？

How to hide / disable Ionic inapp browser top address bar?

ionic-framework

ionic2

ionic3