Question

我正在使用phonegap创建webview应用程序我正在使用iframe方法在应用程序中显示我的网站
我需要为移动浏览器用户显示弹出消息以下载应用程序
所以我创建简单的div只在移动屏幕上显示，因为它的大小为
我如何防止在我的iframe应用程序中显示此div 我正在尝试很多教程并要求但不能为我工作这是我的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>

Answer 1

要隐藏iframe中的div，您可以使用以下内容：

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

您需要使用.contents()来访问iframe的内部元素，然后您可以使用常用的jQuery选择器来随心所欲地执行任何操作。

Answer 2

要在父框架和子框架之间进行通信，请使用postMessage()方法。只要您有权访问这两个网站，它还可以跨域工作（有关详细信息，请参阅CORS）。

隐藏iframe jquery

2 个答案: