Update-Elemente in einer extern geladenen Webansicht

Update Ich fand 'webview.executeScript' jedoch kann ich nicht auf eine der benutzerdefinierten Funktionen zugreifen.Update-Elemente in einer extern geladenen Webansicht

Dies ist jedoch ein großer Schritt vorwärts. Irgendwelche Vorschläge willkommen.

Original-Beitrag

Wir entwickeln einen Kiosk Web-Erweiterung für Chrome OS, die eine extern gehostete Webseite laden. Die Seite wird in eine Webansicht geladen. Diese Seite zeigt dynamische Informationen an, die täglich aktualisiert werden. Um "manuelle" Aktualisierungen auf die Seite zu schieben, pflegen wir eine offene WebSocket-Verbindung zur Kiosk-App. Dies ermöglicht uns, die Seite zu aktualisieren, die Seite zu aktualisieren, Informationen zu pushen usw. Wir müssen jedoch entweder auf das Javascript zugreifen, das in der Webansicht geladen ist, oder auf die Elemente zugreifen. Ich bin mir nicht sicher, ob ich das richtig erkläre oder ob es möglich ist, das zu tun, was ich frage.

Jetzt öffnen wir zwei Verbindungen zum Websocket-Server. Einer ist von der Webseite und der andere ist von der Erweiterung. Ziel ist es, auf eine Verbindung zu reduzieren.

Ich fügte Pseudocode hinzu, um eine Vorstellung davon zu geben, was ich tun muss.

Chrome Web Extension Kiosk index.html

<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div id="page"> 

     </div> 
    </body> 
</html>

Kiosk js Beispiel Hintergrund (Anmerkung: Ich weiß, das über jquery nicht machbar wäre)

document.onLoad({ 
    $("#page").html('<webview id="browser" src="example.com"></webview>'); 
}); 

function ReceiveWebSocketMessage(msg) { 
    switch (msg.cmd) { 
     case "updatedate": 
      $("browser").UpdateDate(msg.data); 
     break; 

     case "reboot": 
      chrome.runtime.RebootDevice(); 
      break; 
    } 
}

Webpage example.com

<html> 
    <head> 
     <title></title> 
    </head> 
    <body> 
     <div id="datetime"> 
      1/1/2016 
     </div> 
    </body> 
</html>

Webseite Beispiel JS http://example.com/app.js

function UpdateDate(newdate) { 
    $("#datetime").html = newdate; 
}

Ich warf zusammen ein schnelles Diagramm, was das alte Design ist wie und was das neue Design ist.

Um es zusammenzufassen, muss ich auf Funktionen zugreifen, die auf der externen Seite sind. Ich hatte kein Glück, es zu erreichen.

Quelle

2016-11-28 mackhax0r

Gelöst! Ich fand die folgenden Beispiele: https://github.com/GoogleChrome/chrome-app-samples/tree/master/samples/webview-samples/shared-script

Grundsätzlich Ich habe das meinen Code:

function Execute(code) { 
    var webview = document.querySelector('webview'); 

    webview.executeScript({ 
     code: generateScriptText(code) 
    }); 
} 

function generateScriptText(fn) { 
    var fnText = fn.toString() 
     .replace(/"/g, '\\"') // Escape double-quotes. 
     .replace(/(\r?\n|\r)/g, '\\n'); // Insert newlines correctly. 

    var scriptText = 
     '(function() {\n' + 
     ' var script = document.createElement("script");\n' + 
     ' script.innerHTML = "(function() { (' + fnText + ')(); })()" \n' + 
     ' document.body.appendChild(script);\n' + 
     '})()'; 
    return scriptText; 
}

Quelle

2016-11-28 19:47:45 mackhax0r

Update-Elemente in einer extern geladenen Webansicht

Antwort

Verwandte Themen