Mantenere intestazione quando si apre il collegamento in InAppBrowser

Question

Utilizzo framework ionico per sviluppare app native. Qui, sto avendo l'intestazione predefinita in tutte le pagine. Quando si passa alla seconda pagina, ho bisogno del browser in-app per visualizzare il contenuto esterno.

Così, ho usato window.open

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

Ma, ho bisogno l'intestazione di essere costante quando sono la visualizzazione del contenuto in del browser in-app.

E 'possibile nel quadro ionico? Non ho bisogno di iframe per questo. È pesantemente ponderato in html.

Aggiornato:

io sto avendo un file html che io sto iniettando a iframe. come

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

Invece di iframe, c'è qualcosa che rimane l'intestazione costante? Se utilizzo il browser in-app, la mia intestazione era invisibile.

Answer 1

EDIT

avevo ignorato l'elemento del browser in-app nella sua interrogazione. Ecco un aggiornamento, in particolare per il browser in-app.

DISCLAIMER: nessuno del codice fornito di seguito è stato testato; tuttavia, questa risposta fornisce linee guida per implementare la soluzione.

Invece di iframe, c'è qualcosa che rimane la costante intestazione? Se utilizzo il browser in-app, la mia intestazione era invisibile. (...) L'intestazione deve essere costante quando visualizzo contenuti di siti Web esterni.

Quando si utilizza browser in-app:

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

si apre un popup che mostra l'URL richiesto.

Si desidera visualizzare la propria intestazione nella finestra del browser in-app. Vedo due modi per farlo:

A) È possibile personalizzare la pagina Web che si desidera visualizzare nel browser in-app in anticipo e memorizzarla sul server.

La pagina Web personalizzata potrebbe includere alcuni HTML di terze parti, utilizzando una delle 4 tecniche menzionate di seguito. Vedi le tecniche 1, 2a, 2b e 2c.

Dire di memorizzare una pagina web personalizzata sul server che è in questo modo:

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

La pagina è memorizzata sul proprio server, all'URL: www.myserver.com

se fate il vostro in-call come : window.open('http://www.myserver.com',...) visualizzerai la tua pagina personalizzata, con le intestazioni personali.

B) Si potrebbe prendere la pagina web di terze parti con il browser in-app, tenerlo nascosto, modificarlo, quindi visualizzarla

prega read this Cordova doc page.

• per aprire una finestra e tenerlo nascosto:

  var ref = window.open (url, bersaglio, 'nascosto = yes');

• per eseguire uno script quando il nascosto in-app finestra è pronto:

  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); 
  } 
  

• Ora è possibile visualizzare la finestra in-app: ref.show();

---

APPENDICE: 4 tecniche per utilizzare contenuti di terze parti nelle tue app:

---

1. Se il sito web di terzi fornisce un'API (soluzione complessa, ma entirable configurabile)

esempio Bing Search API

Alcuni siti Web forniscono un'API, che risponde con semplici informazioni, di solito restituite sotto forma di una stringa JSON.

è possibile utilizzare un templator JavaScript come Mustache per creare il codice HTML dalla risposta JSON avete ottenuto, sia sul lato server o lato client. Poi si apre il popup:

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

Se si va per l'opzione sul lato client, vi consiglio di leggere open window in javascript with html inserted

---

2a. Se il sito web di terze parti non fornisce un'API: cross-site javascript chiamata

Si prega di leggere questa discussione: Loading cross domain html page with jQuery AJAX

Si avrebbe in HTML:

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

E il myLoadedHTML sarebbe pieno di HTML recuperato dal sito Web di terze parti.

Si consiglia di utilizzare uno strumento come YQL per recuperare l'HTML. YQL ti consente di eseguire query complesse per recuperare solo i bit di HTML necessari.

---

2b.Se il sito di terze parti non fornisce un'API: incorporare

Si prega di verificare questa discussione: alternatives to iframes with html5

Si legge che: 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

Si menziona anche il tag embed:

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

Nel tuo caso, probabilmente potresti raggiungere il tuo obiettivo con qualcosa del tipo:

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

---

2c. Se il sito di terze parti non fornisce un'API: iframe

In alternativa, se si desidera visualizzare un sito web di terze parti in un iframe, e quindi modificare il display con i tuoi contenuti, ti suggerisco di controllare questo StackOverflow filo: Cannot modify content of iframe, what is wrong?

Nel vostro caso particolare, diciamo che chiamato il vostro iframe myIframe:

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

si potrebbe quindi raggiungere il tuo obiettivo con qualcosa di simile:

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

Answer 2

Ho paura che il plugin inAppBrowser non supporti tale comportamento. Non è elencato nei loro documenti qui https://github.com/apache/cordova-plugin-inappbrowser

È possibile modificare il codice nativo del plug-in per iOS e Android, se si dispone di tale conoscenza.

Se non si vuole entrare nello sviluppo nativo (probabilmente), allora l'iframe è la strada da percorrere. Ma non sarai in grado di modificare il contenuto dell'iframe perché sarà in un dominio diverso dalla tua applicazione. Tutto quello che puoi fare è posizionare e dimensionare l'iframe in modo che riempia la pagina proprio sotto l'intestazione dell'applicazione.

Answer 3

So che è passato un po 'di tempo - nel caso in cui qualcuno stia lottando con gli stessi problemi: c'è una versione modificabile di InAppBrowser di cordova che funziona come un fascino, l'abbiamo usata di recente in un progetto.

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