Поддержание заголовка при открытии ссылки в InAppBrowser

Ответ 1

ИЗМЕНИТЬ

Я не учитывал элемент браузера в приложении в вашем вопросе. Вот обновление, особенно для браузера в приложении.

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: ни один из приведенных ниже кодов не был протестирован; однако этот ответ дает вам рекомендации по реализации вашего решения.

Вместо iframe есть ли что-нибудь, что остается константой заголовка? Если я использую браузер в приложении, мой заголовок был невидимым. (...) Заголовок должен быть постоянным, когда я просматриваю содержимое внешнего веб-сайта.

Когда вы используете браузер в приложении:

<a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a>

открывается всплывающее окно, в котором отображается запрошенный URL.

Вы хотите, чтобы ваш собственный заголовок отображался в окне браузера в приложении. Я вижу два способа сделать это:

A) Вы можете заранее настроить веб-страницу, которую хотите отобразить в своем браузере в приложении, и сохранить ее на своем сервере.

Настроенная веб-страница могла включать в себя сторонний HTML-код, используя один из 4-х методов, упомянутых ниже. См. Методы 1, 2a, 2b и 2c.

Предположим, что вы сохраняете настроенную веб-страницу на своем сервере, которая выглядит так:

<div id="header"></div>
<div id="main"></div>

Страница хранится на вашем собственном сервере, по адресу: www.myserver.com

Если вы сделаете свой вызов, например: window.open('http://www.myserver.com',...), вы увидите свою настроенную страницу с вашими собственными заголовками.

B) Вы можете получить стороннюю веб-страницу с браузером в приложении, сохранить ее скрытой, изменить ее, а затем отобразить ее

Пожалуйста, прочитайте эту страницу документа Кордовы.

• Чтобы открыть окно и сохранить его скрытым:

  var ref = window.open(url, target, 'hidden = yes');

• Чтобы выполнить script, когда готово окно скрытого приложения:

  var iabRef = null;
  function insertMyHeader() {
  iabRef.executeScript({
      code: "var b=document.querySelector('body'); var a=document.createElement('div');document.createTextNode('my own header!'); a.appendChild(newContent);b.parentNode.insertBefore(a,b);"
  }, function() {
      alert("header successfully added");
  });
  }
  function iabClose(event) {
       iabRef.removeEventListener('loadstop', replaceHeaderImage);
       iabRef.removeEventListener('exit', iabClose);
  }
  
  function onDeviceReady() {
   iabRef = window.open('http://apache.org', '_blank', 'location=yes');
   iabRef.addEventListener('loadstop', insertMyHeader);
   iabRef.addEventListener('exit', iabClose);
  }
  

• Теперь вы можете показать окно в приложении: ref.show();

ПРИЛОЖЕНИЕ: 4 метода использования сторонних материалов в ваших приложениях:

• Если сторонний веб-сайт предоставляет API (сложное решение, но его можно настроить)

например. Bing Search API

Некоторые веб-сайты предоставляют API, который отвечает голой информацией, обычно возвращаемой в виде строки JSON.

Вы можете использовать JavaScript-шаблон, например Mustache, чтобы создать свой HTML-код из полученного ответа JSON, будь то серверная или клиентская боковая сторона. Затем вы откроете всплывающее окно:

<div id="header"></div>
<div id="myTemplatedHTML"></div>

Если вы переходите на вариант с клиентской стороны, я предлагаю вам открыть открытое окно в javascript с вставленным html

2а. Если сторонний веб-сайт не предоставляет API: межсайтовый javascript-вызов

Прочитайте эту тему: Загрузка страницы html перекрестного домена с помощью jQuery AJAX

У вас есть в вашем HTML:

<div id="header"></div>
<div id="myLoadedHTML"></div>

И myLoadedHTML будет заполнен HTML-кодом, полученным с стороннего веб-сайта.

Я рекомендую использовать инструмент, например YQL, чтобы получить HTML. YQL позволит вам создавать сложные запросы для извлечения только необходимых вам фрагментов HTML.

2b. Если сторонний веб-сайт не предоставляет API: embed

Проверьте эту тему: альтернативы iframes с html5

Он читает, что: if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do

В нем также упоминается тег embed:

<embed src="http://www.somesite.com" width=200 height=200 /></embed>

В вашем случае вы могли бы достичь своей цели с помощью чего-то вроде:

<div id="header"></div>
<embed src="http://www.somesite.com" width=200 height=200 /></embed>

2в. Если сторонний веб-сайт не предоставляет API: iframe

В качестве альтернативы, если вы хотите отобразить сторонний веб-сайт в iframe, а затем изменить отображение с помощью собственного контента, я предлагаю вам проверить этот поток StackOverflow: Невозможно изменить контент iframe, что не так?

В вашем конкретном случае, скажем, вы назвали ваш iframe myIframe:

<iframe src="serveraddress/index.html" id="myIframe"></iframe>

Тогда вы могли бы достичь своей цели примерно следующим образом:

$(document).ready(function(){
    $('#myIframe').ready(function(){
        $(this).contents().find('body').before('<div id="header"></div>');
    });
});​

Ответ 2

Я знаю, что это было какое-то время - на всякий случай кто-то борется с одними и теми же проблемами. Там есть тематическая версия кордоны InAppBrowser, которая работает как прелесть, мы использовали ее недавно в проекте.

https://github.com/initialxy/cordova-plugin-themeablebrowser

Ответ 3

Я боюсь, что плагин inAppBrowser не поддерживает такое поведение. Он не указан в их документах здесь https://github.com/apache/cordova-plugin-inappbrowser

Вы можете отредактировать собственный код плагина для iOS и Android, если у вас есть такие знания.

Если вы не хотите попасть в разработку на родном языке (возможно), тогда iframe - это способ пойти. Но вы не сможете редактировать содержимое iframe, потому что оно будет в другом домене из вашего приложения. Все, что вы можете сделать, это положение и размер iframe, чтобы он заполнил страницу прямо под заголовком приложения.