从iframe jquery中隐藏特定的div

我正在使用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()来访问iframe的内部元素，然后你可以使用通常的jQuery选择器来做任何你想做的事情。

要在父帧和子帧之间进行通信，请使用 postMessage(( 方法。只要您可以访问这两个网站，这也能够跨域工作(有关更多信息，请参阅 CORS(。

相关内容

最新更新

热门标签：