iframe中的视屏放大

首先看一下原iframe代码

<div id="shiping">
	<div id="shangzhuo">
	<div class="touming" onclick="shiping('kejianguang')">1</div>
	<iframe id="kejianguang" src="${pageContext.request.contextPath}/visibleLight.action"width="99%" height="100%" scrolling='no'></iframe></div>
	<div id="shangyou">
	<div class="touming" onclick="shiping('hongwai')">2</div>
	<iframe id="hongwai" src="${pageContext.request.contextPath}/iframe.action" width="99%" height="100%" scrolling='no'></iframe></div>
	<div id="xiazhuo">
	<div class="touming" onclick="shiping('qiuji1')">3</div>
	<iframe id="qiuji1" src="${pageContext.request.contextPath}/qiuji1.action"	width="99%" height="100%" scrolling='no'></iframe></div>
	<div id="xiayou">
	<div class="touming" onclick="shiping('qiuji2')">4</div>
	<iframe id="qiuji2"	src="${pageContext.request.contextPath}/qiuji2.action" width="99%" height="100%" scrolling='no'></iframe></div>
	</div>

大体就是将一个大div分割成四个小div，然后在小div中使用iframe引入视屏，现在呢，发现光看小视屏有些地方看的不清楚，肿木办捏，搞个大的啊，占满大半个个屏幕啊，但是海康威视这个视屏虽然自带双击放大，但是因为在右边还需要有个按键操控，所以就不能使用自带的东西，而且我对视屏这一块还不熟，所以我想直接在iframe里面加个点击事件，双击之后打开隐藏的div，这不就大小自己随意调了嘛，但这就有问题了，就是当iframe中加的是视屏的话，这个视屏层级会非常的高，咋都挡不住（设置z-index等），还能把上面的div捅出个窟窿，所以别说iframe的双击事件了，隐藏div都被挡住了，还玩蛇啊，然后我网上搜的方法基本就是：

<param name="wmode" value="opaque">

或者是这样的：

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=" width="600″ height="248″>
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="test.swf">
<param name="quality" value="high">
<param name="wmode" value="Opaque">
<embed src="test.swf" wmode="Opaque" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600″ height="248″></embed>
</object>

重点是这两句哈

 <param name="wmode" value="Opaque">
  wmode="Opaque"

然后我也看的不是太懂，我只能自己慢慢试啦，然后我就在一个差不多的问题看到了一个方法，设置透明遮罩层，然后我就试了试，但是没成功，直到有一次，我不小心删了遮罩层div设置透明度的css样式后，嘿嘿，挡住了，可能这个div和iframe是同一个父div吧，他就不怕iframe的遮挡，但是又出问题了，遮罩div加背景色吧，可以挡住iframe，但是这是不是挡的太彻底了，好歹让我能看视屏吧，现在可没法透明了，但是不设置背景色吧，他就不顶事了（点不到，又被挡了，我也不知道啥情况），然后我机灵一动，嘿嘿，有办法了，加背景色，设置大小，定位到视屏右上角，加个序号，嘿嘿，我可真是个小机灵鬼，然后就是点击序号放大视屏，上css代码：

.touming{
	 position:absolute;
	 left:94%;
	 top:1.5%;
	 width:5%;
	 height:7%;
	 background-color: #EAEAEA;
	 text-align: center;
	 cursor: pointer;
}

就是iframe上面那个div，是他是他就是他，连层级都可以不用，然后打开视屏后我就发现视屏看不了，啥情况？
继续上网搜，哎，看到一个：

$('#'+xx).attr('src', $('#'+xx).attr('src'));

这是我改版过的，大概就是这样，获取src，再重新赋进去，嗯，网上小机灵鬼也挺多的嘛。然后更改代码：

//放大视屏
	    function shiping(xx){
	    	$("#caodaping").show();
	    	$("#kejianguang1").hide();
	    	$("#hongwai1").hide();
	    	$("#qiuji11").hide();
	    	$("#qiuji21").hide();
	    	$("#"+xx).show();
	    	$('#'+xx).attr('src', $('#'+xx).attr('src'));
	    }

前面第一个是最大的隐藏div，后四个是跟小iframe对应的大iframe，毕竟我们需要点谁显示谁嘛，先把四个都写上，点的时候都隐藏，在把点的显示出来，最后就是相当于刷新了，这还可以解决一个问题，就是视屏界面的大小问题，先看代码：

var a=$(window).height();
	var b=$(window).width();
	// 初始化插件参数及插入插件
	WebVideoCtrl.I_InitPlugin(b, a, {
        bWndFull: false,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 2,
		cbSelWnd: function (xmlDoc) {
			g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
			var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
			showCBInfo(szInfo);
		}
	});

最上面两句是我加的，保证视屏大小正好符合iframe的大小，第三句就是海康威视初始化视屏时设置大小啦，
但是这就会有一个问题，还记得那个隐藏div吗？他也是用这个的，但是加载的时候他是隐藏的，没有宽高，所以点开大图的时候里面的视屏没了，现在点开的时候重新刷新一下，就OK了。
然后在看看隐藏大div写的啥吧：

  <!-- 大视屏页面 -->
	<div id="caodaping">
	<div id="zuoda">
	<iframe id="kejianguang1" src="${pageContext.request.contextPath}/visibleLight.action"width="100%" height="100%" scrolling='no'></iframe>
	<iframe id="hongwai1" src="${pageContext.request.contextPath}/iframe.action" width="100%" height="100%" scrolling='no'></iframe>
	<iframe id="qiuji11" src="${pageContext.request.contextPath}/qiuji1.action"width="100%" height="100%" scrolling='no'></iframe>
	<iframe id="qiuji21" src="${pageContext.request.contextPath}/qiuji2.action"width="100%" height="100%" scrolling='no'></iframe>
	</div>
	<!-- 右侧操纵位 -->
	<div id="youxiao">
	<div id="yk" style="height: 50%;width: 100%;left: 0;">
       <div id="yuntai" style="height: 5%;background-color: #2978e3;border: 1px solid #0f438d;text-align:center;font-size: 14px;font-weight: bold;color:white">云台控制</div>
		<div id="zhong" style="height: 150px;width: 150px;position: absolute;">
		<!-- 放置云台底图 -->
		<div style="height: 150px;width: 150px;position: absolute;">
			<img src="${pageContext.request.contextPath}/images/yuntai_00.png" />
		</div>
		<!-- 云台的按钮 -->
		<div style="height: 150px;width: 150px;position: absolute;">
			<!-- 云台左转 -->
			<img id="Y_left" onmousedown="left_down();" onmouseup="left_big_down()" style="cursor:pointer;" src="${pageContext.request.contextPath}/images/yuntai/left.png" />
			<!-- 云台右转 -->
			<img id="Y_right" onmousedown="right_down();" onmouseup="right_big_down()"style="cursor:pointer;"src="${pageContext.request.contextPath}/images/yuntai/right.png" />
			<!-- 云台上转 -->
			<img id="Y_up" onmousedown="up_down();" onmouseup="up_big_down()" style="cursor:pointer;" 	src="${pageContext.request.contextPath}/images/yuntai/up.png" />
			<!-- 云台下转 -->
			<img id="Y_down" onmousedown="down_down();"onmouseup="down_big_down()" style="cursor:pointer;"src="${pageContext.request.contextPath}/images/yuntai/down.png" />
			<!-- 停止 -->
			<img id="Y_big" onmousedown="big_down2()" onmouseup="big()" style="cursor:pointer; width: 56px; "  src="${pageContext.request.contextPath}/images/yuntai/tp2.png"/>
		</div>
		</div>
	</div>
	</div>
	<!-- 返回按钮 -->
	<a id="hui" href="javascript:void(0)" style="position: absolute; left: 99%;top: 3px; z-index: 2000;" onclick="fanhui()">
	<img id="fanhui" src="${pageContext.request.contextPath}/images/min.png"></a>
	</div>

我加了个返回的小图标，毕竟不能放大没有返回嘛，还有就是我前面说到的，页面右侧的操控按钮啦，最上面就是跟之前对应的四个大iframe啦，点谁谁出来，至于隐藏大div为啥最后可以盖住四个小视屏，其实它没有这么厉害，但是它儿子不是有一个包含iframe嘛，一人得道兄弟升天，但是对它老爹就是没效果，我就给他多加了个兄弟，保证把页面全盖住。
好啦，大概就这样了，时间不早了，该下班了，如有不会，欢迎指教，多好是不是。
最后在加俩效果图：
小视屏：

接下来看看大视屏：