隐藏特定的div从jQuery的IFRAME

我使用PhoneGap的
创造的WebView应用我使用iframe的方法来显示我的内部应用程序
网站，我需要表现出对手机浏览器的用户弹出消息下载应用
，所以我创建简单的div在手机屏幕显示不仅是因为它的大小
如何防止这个div在我的iframe的应用程序显示
我想要很多的教程和要求，但不是为我工作
这是我的iframe页面
隐藏特定的div从jQuery的IFRAME

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

这是我的项目的完整代码

$(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>

来源

2017-06-22 Mohamed Mehanny

对于父母和孩子之间的沟通，你可以使用https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage。 – Mic

要隐藏一个div是在iframe中，你可以使用以下命令：

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

您需要使用.contents()可以访问iframe的内部元素，然后您可以使用常用的jQuery选择器来完成您想要的任何操作。

来源

2017-06-22 09:36:50 31piy

只适用于父母和小孩在同一个域中。在webapp的情况下，它应该工作。 – Mic

谢谢@ 31piy准确的帮助Mic只在同一个域中工作，在我的情况下它不工作 –

@MohamedMehanny：那么你可以使用postMesaage函数，但是你可以访问子页面的代码。 – Mic

要在父框架和子框架之间进行通信，请使用postMessage()方法。只要您有权访问这两个网站，这也有能力跨域（请参阅CORS了解更多信息）。

来源

2017-06-22 09:39:04 hallleron

我不知道如何使用这个功能，我想但我不明白如何使用postMessage来隐藏div –

基本上在你的iframe网站，你添加一个侦听器postMessage（）和你的父母您发送消息的网站。当iframe网站收到消息时，可以执行你的函数来隐藏div。这个链接中的例子实际上对你的情况非常有用。 – hallleron

我在调试iframe页面时出现这个错误“uncaught referenceerror receiveMessage is not defined” –

隐藏特定的div从jQuery的IFRAME

回答

相关问题