我正在使用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>要隐藏 iframe 中的 div，可以使用以下命令：
$("#iframe").contents().find("#your_div_id").hide();
您需要使用
.contents()要在父框架和子框架之间进行通信，请使用 postMessage() 方法。只要您有权访问这两个网站，它还具有跨域工作的能力（有关更多信息，请参阅CORS）。