h5页面嵌套iframe标签

最新推荐文章于 2024-08-18 21:47:24 发布

原创最新推荐文章于 2024-08-18 21:47:24 发布 · 4.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iframe #嵌套iframe

iframe 嵌套专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在H5的a页面中通过iframe标签嵌套显示B页面的内容，详细探讨了a页面和B页面的交互实现。

a页面

a页面展示的是在a页面中怎么显示的B页面的内容

<style>
	.cover{
			display: none;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.5);
			z-index: 1;
		}
		.cover iframe{
			display: block;
			margin: 0 auto;
		}
</style>
<body>
	<div class="cover">
	/* src是嵌套的页面路径*/
		<iframe src="./mark.html" frameborder="0" width="1000px" height="650px"></iframe>
	</div>
</body>

B页面

此处写需要展示的内容(要在a页面中展示出的页面)
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>地图标注</title>
	
	<style>
		html {
			overflow: hidden;
		}
		
		.mark-icon-div {
			position: absolute;
			width: 24px;
			height: 24px;
			float: right;
			z-index: 10000;
			right: 25px;
			top: 9px;
		}
		
		.mark-icon-img {
			cursor: pointer;
			width: 50px;
			height: 50px;
		}
		
	</style>
</head>
<body>
	<div id="mark_map" style="width: 1000px;height:650px;"></div>
	
	<div id="mark-icon-div" class="mark-icon-div">
		<img class="mark-icon-img" src="./img/mark/tack.png" title="标注" onclick="drawPoint()">
		<img class="mark-icon-img" src="./img/mark/save.png" title="保存" onclick="savePointInfo()">
		<img class="mark-icon-img" src="./img/mark/close.png" title="关闭" onclick="closeIframe()">
	</div>
	
</body>
	<script>
	</script>
</html>