web之iframe的那些事、打开外链、窗口、嵌入、iframe、location、href、replace、open、assign
文章目录
- 1、绑定点击事件
- 2、页面存在高德地图时打开新的iframe
- 3、题外话
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
虽然可以打开一个新窗口,但也会受到浏览器限制,可能会被浏览器拦截。