Le maintien en-Tête lors de l'Ouverture d'un Lien dans InAppBrowser

MODIFIER

J'avais négligé le navigateur intégré à l'application de l'élément dans votre question. Voici une mise à jour, en particulier pour navigateur in-app.

AVERTISSEMENT: rien dans le code fourni ci-dessous a été mis à l'essai; cependant, cette réponse vous donne des lignes directrices pour mettre en œuvre votre solution.

Au lieu de iframe, il n'y a rien qui reste de l'en-tête constant? Si je utiliser le navigateur intégré à l'application, ma tête était invisible.(...)D'en-tête doit être constante lorsque je consulte le site web externe de contenu.

Lorsque vous utilisez navigateur in-app:

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

il ouvre une fenêtre qui affiche l'URL demandée.

Vous aimeriez avoir votre propre en-tête d'affiche dans le navigateur intégré à l'application de la fenêtre. Je vois deux façons de le faire:

A) Vous pourriez personnaliser la page web que vous souhaitez afficher dans votre navigateur in-app à l'avance et de les stocker sur votre serveur.

Personnalisés page web pourrait avoir inclus une troisième partie HTML, à l'aide de l'un des 4 techniques mentionnées ci-dessous. Voir techniques 1, 2a, 2b et 2c.

Dire que vous enregistrez une page web personnalisée sur votre serveur qui est comme suit:

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

La page est stockée sur votre propre serveur, à l'adresse url: www.myserver.com

Si vous faire de votre appel, comme: window.open('http://www.myserver.com',...) vous afficher personnalisé de votre page, avec vos propres en-têtes.

B) Vous pouvez récupérer la troisième partie de la page web avec le navigateur intégré à l'application, le garder caché, le modifier, puis de l'afficher

Veuillez lire ce Cordova page de doc.

• Pour ouvrir une fenêtre et de le garder caché:

  var ref = fenêtre.open(url, cible, cachés "=yes');

• Pour exécuter un script lors de l'caché dans l'application de la fenêtre est prêt:

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

• Maintenant, vous pouvez afficher la fenêtre d'application: ref.show();

---

ANNEXE: 4 techniques pour utiliser des tiers le contenu de vos applications:

---

1. Si le site web d'un tiers fournit une API (solution complexe, mais entirable configurable)

par exemple Bing API de Recherche

Certains sites web fournissent une API, qui répond avec un nu de l'information, généralement retournée sous la forme d'un JSON chaîne.

Vous pouvez utiliser un JavaScript templator comme Moustache pour créer votre code HTML à partir de la réponse JSON que vous avez, soit côté serveur ou côté client. Ensuite, vous ouvrez votre fenêtre pop-up:

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

Si vous allez pour le côté client de l'option, je vous conseille de lire ouvrir la fenêtre en javascript avec le code html inséré

---

2a. Si le site web d'un tiers ne permet pas de fournir une API: "cross-site appel javascript

Veuillez lire ce fil: Chargement de la croix de domaine de la page html avec jQuery AJAX

Vous auriez dans votre code HTML:

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

Et la myLoadedHTML serait rempli avec HTML extraite à partir du site web d'un tiers.

Je recommande d'utiliser un outil comme YQL pour récupérer le code HTML. YQL vous permettra de faire des requêtes complexes pour extraire seulement les bits de code HTML que vous avez besoin.

---

2b. Si le site web d'un tiers ne permet pas de fournir une API: intégrer

Veuillez consulter ce fil de discussion: des alternatives à iframes avec html5

Il lit que: 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

Il mentionne également la balise embed:

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

Dans votre cas, vous pourriez probablement à atteindre votre objectif avec quelque chose comme:

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

---

2c. Si le site web d'un tiers ne permet pas de fournir une API: iframe

Alternativement, si vous souhaitez afficher un site web tiers, dans un iframe, puis modifier l'affichage avec votre propre contenu, je vous suggère de vérifier cette StackOverflow fil: Impossible de modifier le contenu de l'iframe, ce qui est faux?

Dans votre cas particulier, disons que vous avez nommé votre iframe myIframe:

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

Vous pouvez atteindre votre objectif avec quelque chose comme ceci:

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

J'ai peur que le inAppBrowser Plugin ne prend pas en charge ce type de comportement. Il ne figure pas dans leurs docs ici
https://github.com/apache/cordova-plugin-inappbrowser

Vous pouvez éditer le plugin code natif pour iOS et Android, si ce type de connaissances.

Si vous ne voulez pas d'obtenir en développement natif (sans doute), puis de l'iframe est le chemin à parcourir. Mais vous ne serez pas en mesure de modifier le contenu de l'iframe, car il sera dans un autre domaine à partir de votre application. Tout ce que vous pouvez faire est de position et la taille de l'iframe afin qu'elle remplisse la page de droite ci-dessous vous demande d'en-tête.