Как скрыть / отключить верхнюю адресную строку браузера Ionic inapp?

Я реализовал ионный браузер 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, но все еще видна верхняя адресная строка.


person user2828442    schedule 19.03.2018    source источник


Ответы (3)


Код, которым вы поделились, — это код, который вы используете для создания inAppBrowser? Если это так, вам нужно объявить свои параметры const перед созданием вашего inAppBrowser:

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' неверно, так как панель инструментов является одним из свойств параметров и должна быть строкой, панель инструментов не обязательно должна быть частью строки. Альтернативой является использование простого объекта со свойством location:

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

Надеюсь это поможет.

person Gabriel Barreto    schedule 19.03.2018
comment
удалось отключить его, я столкнулся с другой проблемой, на странице есть кнопка загрузки, которая открывается с inapp browsing , невозможно загрузить файл, это ссылка, если вы хотите попробовать - sco7.com/filemanager/sapphire/, как я могу скачать его, потому что это моя единственная цель :( - person user2828442; 19.03.2018
comment
@user2828442 user2828442 говорит, что срок действия ссылки истек :( но вы хотите открыть страницу, и когда пользователь нажимает кнопку загрузки, он загружает контент? - person Gabriel Barreto; 19.03.2018
comment
Да, что-то не так с моим хостингом, я проверяю это, я вернусь, как только ссылка появится - person user2828442; 19.03.2018

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
    }

таким образом появится то, что вы хотите скрыть или контролировать!

person Karl king    schedule 31.05.2019

Либо вы можете применить 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);
person Anoop M Maddasseri    schedule 30.11.2018