我正在使用phonegap创建webview应用程序
我使用iframe方法来显示我的网站内的应用程序
我需要显示弹出消息为移动的浏览器用户下载应用程序
因此，我创建了简单div来显示在移动的屏幕上，只是因为它的大小
我如何防止这个div显示在我的iframe应用程序
我正在尝试许多教程和要求，但不为我工作
这是我的iframe页面
<body>
<div class="loader"></div>
<iframe id="iframe" src="http://www.medicamall.com"></iframe>
</body>这是我的项目的完整代码
$(window).load(function() {
$(".loader").fadeOut("slow");
});
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
setTimeout(function () {
navigator.splashscreen.hide();
}, 50);
}
// 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;
}
function onDeviceReady() {
var networkState = checkConnection();
/* load local files if there is not network connection */
if (networkState == Connection.NONE) {
$('.openapp').children('a').attr("href","offline.html");
}
}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 {
height:100%;
overflow:hidden;
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
height:100%;
}
#iframe {
border:none;
width:100%;
height:100%;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
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-
<title>Medica Mall</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
</head>
<body>
<div class="loader"></div>
<iframe id="iframe" src="http://www.medicamall.com"></iframe>
<script type="text/javascript">
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>
2条答案
按热度按时间yptwkmov1#
要隐藏iframe中的div，可以使用以下命令：
你需要使用
.contents()来访问iframe的内部元素，然后你可以使用普通的jQuery选择器来做任何你想做的事情。wpcxdonn2#
要在父帧和子帧之间进行通信，请使用postMessage()方法。这也有跨域工作的能力（有关详细信息，请参阅CORS），只要您可以访问两个网站。