webentwicklung-frage-antwort-db.com.de

Header beim Öffnen des Links in InAppBrowser beibehalten

Ich verwende ein ionisches Framework, um eine native App zu entwickeln. Hier habe ich Standard-Header auf allen Seiten. Beim Umschalten auf die zweite Seite benötige ich einen In-App-Browser, um den externen Inhalt anzuzeigen.

Also habe ich window.open benutzt

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

Der Header muss jedoch konstant sein, wenn ich den Inhalt im In-App-Browser ansehe.

Ist es im ionischen Rahmen möglich? Ich brauche keinen Iframe dafür. Es ist schwer in HTML gewichtet.

Aktualisierte:

Ich habe eine HTML-Datei, die ich zu iframe einspritze. mögen

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

Gibt es anstelle von iframe irgendetwas, bei dem der Header konstant bleibt? Wenn ich einen In-App-Browser verwende, war mein Header unsichtbar.

13
UI_Dev

EDIT

Ich habe das In-App-Browser-Element in Ihrer Frage ignoriert. Hier ist ein Update speziell für den In-App-Browser.

HAFTUNGSAUSSCHLUSS: Keiner der unten angegebenen Codes wurde getestet. Diese Antwort enthält jedoch Richtlinien für die Implementierung Ihrer Lösung.

Gibt es anstelle von iframe etwas, das die Header-Konstante bleibt? Wenn ich einen In-App-Browser verwende, ist mein Header nicht sichtbar. (...) Der Header muss konstant sein, wenn ich Inhalte von externen Websites ansehe.

Wenn Sie den In-App-Browser verwenden:

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

es öffnet sich ein Popup, in dem die angeforderte URL angezeigt wird.

Sie möchten, dass Ihre eigene Kopfzeile im In-App-Browserfenster angezeigt wird. Ich sehe zwei Möglichkeiten, dies zu tun:

A) Sie können die Webseite, die Sie anzeigen möchten, vorab in Ihrem In-App-Browser anpassen und auf Ihrem Server speichern.

Die angepasste Webseite kann HTML-Code von Drittanbietern enthalten, wobei eine der 4 unten genannten Techniken verwendet wird. Siehe Techniken 1, 2a, 2b und 2c.

Angenommen, Sie speichern eine benutzerdefinierte Webseite auf Ihrem Server.

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

Die Seite wird auf Ihrem eigenen Server unter folgender URL gespeichert: www.myserver.com

Wenn Sie einen Anruf tätigen wie: window.open('http://www.myserver.com',...), wird Ihre angepasste Seite mit Ihren eigenen Kopfzeilen angezeigt.

B) Sie könnten die Webseite eines Drittanbieters mit einem In-App-Browser abrufen, sie verbergen, ändern und dann anzeigen

Bitte lesen Sie diese Cordova-Dokumentseite .

  • So öffnen Sie ein Fenster und lassen es verborgen:

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

  • So führen Sie ein Skript aus, wenn das ausgeblendete In-App-Fenster bereit ist:

    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);
    }
    
  • Jetzt können Sie das In-App-Fenster anzeigen: ref.show();


ANHANG: 4 Techniken zum Verwenden von Inhalten von Drittanbietern in Ihren Apps:


  1. Wenn die Website eines Drittanbieters eine API bereitstellt (komplexe Lösung, aber vollständig konfigurierbar)

z.B. Bing Search API

Einige Websites bieten eine API an, die mit bloßen Informationen antwortet, die normalerweise in Form einer Zeichenfolge JSON zurückgegeben werden.

Sie können einen JavaScript-Templator wie Moustache verwenden, um Ihr HTML aus der JSON-Antwort zu erstellen, die Sie erhalten haben, entweder serverseitig oder clientseitig. Dann öffnest du dein Popup:

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

Wenn Sie sich für die clientseitige Option entscheiden, empfehlen wir Ihnen, Fenster in Javascript mit eingefügtem HTML öffnen


2a. Wenn die Website eines Drittanbieters keine API bietet : Cross-Site-Aufruf von Javascript

Bitte lesen Sie diesen Thread: Lade domänenübergreifende HTML-Seite mit jQuery AJAX

Sie hätten in Ihrem HTML:

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

Und das myLoadedHTML wird mit HTML gefüllt, das von der Website eines Drittanbieters abgerufen wird.

Ich empfehle, ein Tool wie YQL zu verwenden, um den HTML-Code abzurufen. Mit YQL können Sie komplexe Abfragen durchführen, um nur die benötigten HTML-Elemente abzurufen.


2b. Wenn die Website eines Drittanbieters keine API bietet : einbetten

Bitte überprüfen Sie diesen Thread: Alternativen zu iframes mit html5

Es lautet: 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

Es wird auch das Embed-Tag erwähnt:

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

In Ihrem Fall könnten Sie Ihr Ziel wahrscheinlich mit etwas erreichen:

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

2c. Wenn die Website eines Drittanbieters keine API bietet : iframe

Wenn Sie alternativ eine Website eines Drittanbieters in einem Iframe anzeigen und dann die Anzeige mit Ihrem eigenen Inhalt ändern möchten, empfehlen wir Ihnen, diesen StackOverflow-Thread zu überprüfen: Inhalt von Iframe kann nicht geändert werden. Was ist falsch?

Angenommen, Sie haben in Ihrem speziellen Fall Ihren iframe myIframe benannt:

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

Sie könnten dann Ihr Ziel mit etwas erreichen:

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

Ich weiß, dass es eine Weile her ist - nur für den Fall, dass jemand mit denselben Problemen zu kämpfen hat: Es gibt eine themenbezogene Version von Cordovas InAppBrowser, die wie ein Zauber funktioniert. Wir haben sie kürzlich in einem Projekt verwendet.

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

1
Dani

Ich fürchte, das inAppBrowser-Plugin unterstützt ein solches Verhalten nicht. Es ist hier nicht in den Dokumenten aufgeführt. https://github.com/Apache/cordova-plugin-inappbrowser

Sie können den nativen Code des Plugins für iOS und Android bearbeiten, wenn Sie über solche Kenntnisse verfügen.

Wenn Sie (wahrscheinlich) nicht in die native Entwicklung einsteigen möchten, ist iframe der richtige Weg. Sie können den Inhalt des Iframes jedoch nicht bearbeiten, da er sich in einer anderen Domäne als Ihre Anwendung befindet. Sie können den iframe nur so positionieren und in der Größe anpassen, dass er die Seite direkt unter dem Anwendungsheader ausfüllt.

0
Gaafar