Maintenir l'en-tête lors de l'ouverture du lien dans InAppBrowser

J'utilise le framework ionique pour développer une application natif. Ici, j'ai l'en-tête par défaut dans toutes les pages. Lorsque vous passez en deuxième page, j'ai besoin d'un navigateur dans l'application pour afficher le contenu externe.

Donc, j'ai utilisé window.open

  • Lire le fichier local xls / xlsx dans javascript
  • Quelle est la différence entre $ routeProvider et $ stateProvider in AngularJs
  • AngularJS constantes
  • AngularJS bascule la classe en utilisant ng-class
  • Utilisant AngularJS html5mode avec nodeJS et Express
  • Réponse de la boîte de dialogue de confirmation d'alerte douce
  • <a href="#" onclick="window.open('https://google.com','_blank','location=yes','closebuttoncaption=Return');">Click Here to view inapp browser</a> 

    Mais, j'ai besoin que l'en-tête soit constant lorsque je visualise le contenu dans le navigateur dans l'application.

    Est-ce possible dans un cadre ionique? Je n'ai pas besoin d'iframe pour cela. Il est lourd de poids en html.

    Actualisé:

    J'ai un fichier html que je mène à l'iframe. comme

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

    Au lieu de l'iframe, y at-il quelque chose qui reste l'en-tête constant? Si j'utilise un navigateur dans l'application, mon en-tête était invisible.

  • Sélectionnez le texte lorsque vous tapez sur textarea
  • Balise de script angularJS JSON-LD
  • Défilement de fond dynamique
  • Comment dessiner le graphique à l'aide de deux valeurs x et y d'entrée à l'aide de la bibliothèque js?
  • Angularjs $ http.post, contrôleur asp.net mvc obtient null
  • Angularjs force majuscule dans la zone de texte
  • 3 Solutions collect form web for “Maintenir l'en-tête lors de l'ouverture du lien dans InAppBrowser”

    MODIFIER

    Je n'avais pas pris en compte l'élément de navigation dans l'application dans votre question. Voici une mise à jour, spécifiquement pour le navigateur dans l'application.

    AVERTISSEMENT : aucun des codes fournis ci-dessous n'a été testé; Cependant, cette réponse vous donne des directives pour mettre en œuvre votre solution.

    Au lieu de l'iframe , y at -il quelque chose qui reste l'en-tête constant? Si j'utilise le navigateur dans l'application, mon en-tête était invisible. (…) L'en-tête doit être constant lorsque je regarde le contenu du site Web externe.

    Lorsque vous utilisez un navigateur dans l'application:

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

    Il ouvre un popup qui affiche l'URL demandée.

    Vous souhaitez que votre propre en-tête soit affiché dans la fenêtre du navigateur dans l'application. Je vois deux façons de le faire:

    A) Vous pouvez personnaliser la page Web que vous souhaitez afficher dans votre navigateur dans l'application et l'enregistrer sur votre serveur.

    La page Web personnalisée aurait pu inclure un HTML tiers, en utilisant l'une des 4 techniques mentionnées ci-dessous. Voir les techniques 1, 2a, 2b et 2c.

    Disons que vous stockez une page Web personnalisée sur votre serveur qui ressemble à ceci:

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

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

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

    B) Vous pouvez récupérer la page Web du tiers avec un navigateur dans l'application, le garder caché, le modifier, puis l'afficher

    Veuillez lire cette page docteur Cordova .

    • Pour ouvrir une fenêtre et la garder cachée:

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

    • Pour exécuter un script lorsque la fenêtre cachée dans l'application est prête:

       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); } 
    • Vous pouvez maintenant afficher la fenêtre dans l'application: ref.show();


    APPENDICE : 4 techniques pour utiliser du contenu tiers dans vos applications:


    1. Si le site Web tiers fournit une API (solution complexe, mais configurable définitivement)

    P. Ex. API de recherche Bing

    Certains sites Web fournissent une API, qui répond avec des informations nues, généralement renvoyées sous la forme d'une chaîne JSON .

    Vous pouvez utiliser un modèle de JavaScript comme Moustache pour créer votre HTML à partir de la réponse JSON que vous avez reçue, côté serveur ou côté client. Ensuite, vous ouvrez votre popup:

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

    Si vous allez pour l'option côté client, je vous suggère de lire la fenêtre ouverte en javascript avec html inséré


    2a. Si le site Web tiers ne fournit pas d'API : appel javascript entre sites

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

    Vous auriez dans votre HTML:

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

    Et le myLoadedHTML serait rempli de HTML extrait du site Web de 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 récupérer uniquement les bits de HTML dont vous avez besoin.


    2b. Si le site Web tiers ne fournit pas d'API : incorporer

    Veuillez vérifier ce fil: alternatives aux iframes avec html5

    Il se lit comme suit: 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 intégrale:

     <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 tiers ne fournit pas d'API : iframe

    Sinon, 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 ce fil StackOverflow: Impossible de modifier le contenu de l'iframe, qu'est-ce qui ne va pas?

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

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

    Vous pourriez alors atteindre votre objectif avec quelque chose comme ceci:

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

    Je sais que cela a été un certain temps – au cas où quelqu'un est en difficulté avec les mêmes problèmes: Il existe une version à thème de l'InAppBrowser de Cordova qui fonctionne comme un charme, nous l'avons utilisé récemment dans un projet.

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

    Je crains que le plugin InAppBrowser ne supporte pas ce type de comportement. Ce n'est pas listé sur leurs documents ici https://github.com/apache/cordova-plugin-inappbrowser

    Vous pouvez éditer le code natif du plugin pour iOS et Android, si vous avez une telle connaissance.

    Si vous ne voulez pas entrer dans le développement natif (probablement), alors l'iframe est le chemin à parcourir. Mais vous ne pourrez pas modifier le contenu de l'iframe car il sera dans un domaine différent de votre application. Tout ce que vous pouvez faire est de positionner et de dimensionner l'iframe afin qu'il remplisse la page juste en dessous de votre en-tête d'application.

    JavaScript rend le site Web intelligent, beauté et facile à utiliser.