Question

我在我的应用中实现了离子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');
  }

这样做我就可以打开一个没有URL栏的浏览器窗口。

同样使用'toolbar=no'是错误的，因为工具栏是options属性之一，它需要是一个字符串，工具栏不需要成为字符串的一部分。另一种方法是使用具有location属性的对象：

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

希望这有帮助。

Answer 2

您可以在InAppBrowserOptions中应用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);
  }

或者您可以使用高度自定义的themeable-browser 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浏览器顶部地址栏？

3 个答案: