2017-06-22 2 views
0

Ich erstelle webview Anwendung phonegap mit
i iframe Methode bin mit meiner Website innerhalb Anwendung zeigen
ich brauche Popup-Nachricht für mobile Browser-Benutzer zeigen Anwendung herunterladen
so i Erstellung von einfachen div nur in mobilen Bildschirm zu zeigen, aufgrund seiner Größe
, wie ich dieses div in meinem iframe aus gezeigt Anwendung verhindern kann
i viele Tutorials und fragt ich versucht, aber nicht für mich arbeiten
das ist mein iframe Seite
verstecken spezifische div von iframe jquery

<body> 
    <div class="loader"></div> 
    <iframe id="iframe" src="http://www.medicamall.com"></iframe> 
</body> 

dies ist voll Code meines Projekts

$(window).load(function() { 
 
\t $(".loader").fadeOut("slow"); 
 
}); 
 
document.addEventListener("deviceready", onDeviceReady, false); 
 
\t function onDeviceReady() { 
 
\t \t setTimeout(function() { 
 
\t \t \t navigator.splashscreen.hide(); 
 
\t \t }, 50); 
 
\t } 
 

 
// offline event 
 
function checkConnection() { 
 
      var networkState = navigator.network.connection.type; 
 
      var states = {}; 
 
      states[Connection.UNKNOWN] = 'Unknown connection'; 
 
      states[Connection.ETHERNET] = 'Ethernet connection'; 
 
      states[Connection.WIFI]  = 'WiFi connection'; 
 
      states[Connection.CELL_2G] = 'Cell 2G connection'; 
 
      states[Connection.CELL_3G] = 'Cell 3G connection'; 
 
      states[Connection.CELL_4G] = 'Cell 4G connection'; 
 
      states[Connection.NONE]  = 'No network connection'; 
 
      
 
      return networkState; 
 
      
 
     } 
 
\t function onDeviceReady() { 
 
\t \t var networkState = checkConnection(); 
 
\t \t /* load local files if there is not network connection */ 
 
\t \t \t if (networkState == Connection.NONE) { 
 
\t \t \t $('.openapp').children('a').attr("href","offline.html"); 
 
\t \t \t } 
 
\t } 
 

 
\t
body { 
 
    -webkit-touch-callout: none;    /* prevent callout to copy image, etc when tap to hold */ 
 
    -webkit-text-size-adjust: none;    /* prevent webkit from resizing text to fit */ 
 
    -webkit-user-select: none;     /* prevent copy paste, to allow, change 'none' to 'text' */ 
 
    width:100%; 
 
} 
 
html { 
 
\t height:100%; 
 
\t overflow:hidden; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
body { 
 
\t margin:0; 
 
\t padding:0; 
 
\t height:100%; 
 
} 
 
#iframe { 
 
\t border:none; 
 
\t width:100%; 
 
\t height:100%; 
 
} 
 
.loader { 
 
\t position: fixed; 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 9999; 
 
\t background: url('../img/Preloader.gif') 50% 50% no-repeat rgb(255,255,255); 
 
}
<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="format-detection" content="telephone=no" /> 
 
    <meta name="msapplication-tap-highlight" content="no" /> 
 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" /> 
 
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. --> 
 
    <meta http-equiv="Content-Security-Policy" content="default- 
 

 
\t <title>Medica Mall</title> 
 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
 
\t <script src="js/jquery-1.9.1.min.js"></script> 
 
\t <script src="js/plugins.js"></script> 
 
</head> 
 

 
<body> 
 
\t <div class="loader"></div> 
 
    <iframe id="iframe" src="http://www.medicamall.com"></iframe> 
 
    
 
\t <script type="text/javascript"> 
 
\t \t window.addEventListener("message", receiveMessage, false); 
 
\t \t 
 
\t </script> 
 
\t 
 
</body> 
 

 
</html>

+0

Für die Kommunikation zwischen Eltern und Kind können Sie https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage verwenden. – Mic

Antwort

0

ein div zu verbergen, die in der iframe ist, erhalten Sie folgende verwenden:

$("#iframe").contents().find("#your_div_id").hide(); 

Sie verwenden müssen .contents(), um auf die inneren Elemente von iframe zuzugreifen, und dann können Sie die üblichen jQuery-Selektoren verwenden, um damit zu tun, was Sie wollen.

+0

das funktioniert nur, wenn das Eltern- und Kind in der gleichen Domäne ist. im Falle der Webapp sollte es funktionieren. – Mic

+0

danke @ 31piy für Ihre Hilfe genau Mic es funktioniert nur in der gleichen Domäne, in meinem Fall funktioniert es nicht –

+0

@MohamedMehanny: dann können Sie die postMesaage Funktionen verwenden, aber Sie haben Zugriff auf den Code der untergeordneten Seite. – Mic

0

Um zwischen übergeordneten und untergeordneten Frames zu kommunizieren, verwenden Sie die Methode postMessage(). Dies hat auch die Fähigkeit, domänenübergreifend zu arbeiten (siehe CORS für weitere Informationen), solange Sie Zugriff auf beide Websites haben.

+0

ich weiß nicht, wie man mit dieser Funktion arbeitet, ich versuche, aber ich kann nicht verstehen, wie man mit PostMessage arbeitet, um div zu verstecken –

+0

Grundsätzlich in Ihrer Iframe-Website, fügen Sie einen Listener für postMessage() und in Ihrem Elternteil Website senden Sie eine Nachricht. Wenn die iframe-Website eine Nachricht erhält, können Sie die Funktion ausführen, um beispielsweise das div zu verbergen. Die Beispiele in diesem Link sind tatsächlich sehr gut für Ihren Fall. – hallleron

+0

Ich bekomme diesen Fehler im Debug von iframe-Seite "uncaught referenceerror receiveMessage ist nicht definiert" –