web之iframe的那些事、打开外链、窗口、嵌入、iframe、location、href、replace、open、assign

---

1、绑定点击事件

<div class="dg_gtc_2_384 grg_12 gcg_12">
	<div class="h_162 pr" v-for="item in playArr" :key="item.id">
		<iframe class="iframe z_index_5 pa" height="100%" width="100%" :src="item.https" frameborder="0">iframe>
		
		<div class="w_100_ h_100_ pa z_index_7" @click="click(item)">div>
	div>
div>

---

原因

当循环iframe标签时，无论在v-for标签上绑定点击事件或在iframe标签上绑定点击事件，此时都无法触发点击事件。因为iframe的层级很高，且我们自定义的父级标签的层级无法覆盖它。绑定在iframe标签上也无法捕获到点击事件，目前尚不知何原因。

---

解决

可以通过与iframe标签同级再定义一个div，div的内容为空。一定要记得给div设置宽高，最好宽高与父级宽高一样。还要注意给iframe和空div设置层级，iframe的层级比空div的层级低即可。以上代码真实有效，本人亲自试验过了，可放心使用。

---

2、页面存在高德地图时打开新的iframe

<div v-if="isIframe" class="pf df_jcc_aic t_0 l_0 w_100vw h_100vh z_index_9 back_co_rgba_51_9" @click="offIframe">
	<iframe class="iframe" height="80%" width="90%" :src="url" frameborder="0">iframe>
div>

---

原因问题

在打开新的弹窗时高德地图的小图标和版本文字会浮在弹窗上面，无论弹窗设置的层级多高都无法覆盖掉高德的小图标和版本文字。

---

解决

可以在打开弹窗时隐藏高德地图，不要使用v-if，因为v-if会销毁dom，高德地图使用canvas实现，所以销毁dom后如果不重新加载的话高德地图不会出现，所以使用v-show是解决问题的最有效，最便捷的方式。

---

3、题外话

如果使用iframe来打开视频，也可以使用打开新窗口或在本窗口全屏打开也可以，总之有多种方式，不过使用弹窗的方式对用户体验会比较好。

在本窗口打开链接
window.location.href = 'url'; 会保留原先的窗口链接，有返回功能
window.location.replace('url'); 用新的文档替换当前文档，没有返回功能
window.location.assign('url'); 加载新文档，和window.location.href没什么区别

打开一个新的浏览器窗口或查找一个已命名的窗口
window.open('url', '_blank');
其中window.open的第二个属性有以下的值可供选择
_blank URL加载到一个新的窗口。这是默认
_parent URL加载到父框架
_self URL替换当前页面
_top URL替换任何可加载的框架集
name 窗口名称

---

_blank虽然可以打开一个新窗口，但也会受到浏览器限制，可能会被浏览器拦截。