iframe的显示和隐藏以及zIndex的使用

最新推荐文章于 2025-03-20 22:00:51 发布
最新推荐文章于 2025-03-20 22:00:51 发布
阅读量9.8k 收藏 1
点赞数
文章标签： z-index zIndex iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whynottrythis/article/details/43743031
版权 
iframe的显示和隐藏

<body>
<iframe></iframe>
</body>

iframe设置了style="z-index:-1; visilility:hiddle"
某种情况下设置iframe显示$('iframe').style.visilility='visible'; $('iframe').style.zIndex='2';

在iframe中调用父类body中的元素
parent.document.getElementByID('id').style.zIndex='-1';

总结：
1.嵌套iframe的html页面的调用
2.zIndex和z-index的使用场合和方式；


z-index对象没有position 属性，是不会工作的。

$('button').click(function() {
    $('body').append("<div class='overlay'></div>");
    $('table').css('zIndex', '60');
    $('table').css({ 'position': 'relative' });
});
或者 

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 50;
}

参考网址：There

i-neojos
关注
OpenLayers6入门，OpenLayers的Popup弹出框如何内嵌Vue组件内容和内嵌iframe网页，根据所点击要素动态切换弹框内容
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
12-04 1060
本章主要讲解OpenLayers弹出框如何与VUE组件联动，在Popup弹出框内容中嵌入vue的组件，以及iframe第三方网页和html元素等内容。
Vue-高德地图的使用
ygkyufcl的博客
09-11 805
一、实现根据地图选择位置 template <span>{{location}}</span> <iframe id="mapContainer" src="https://m.amap.com/picker/?center=116.3972,39.9696&key=608d75903d29ad471362f8c58c550daf" ></iframe> script data(){ return{ location:'' } } m
iframe改变不了css,css悬停改变iframe位置和z-index在IE中不起作用
weixin_31098573的博客
08-03 488
当我将鼠标悬停在iframe上时，我的页面上有一项功能css会更改position和z-index，以便iframe变得更大并移到前面。但它不会在IE中工作。很难让悬停变化触发(我必须在div的边界上缓慢移动)，当它触发时，忽略了放大的iframe。JSfiddle for this：http://jsfiddle.net/LWRUd/(小提琴正常工作)CSS：.server-unit-head{...
div iframe select 的zindex 任意布置
Fbote
07-22 141
感谢[url]http://www.sikeu.com/user1/yesu/archives/2008/200812613952.html[/url] 引用内容 Div被Select挡住，是一个比较常见的问题。 有的朋友通过把div的内容放入iframe或object里来解决。 可惜这样会破坏页面的结构，互动性不大好。 这里采用...
Iframe深度实践：应用场景详解、兼容性问题及跨域通信实战
最新发布
mutuyxy的博客
03-20 1098
<iframe>（内联框架）是 HTML 中的一个标签，用于在当前网页中嵌入另一个网页。它允许你在一个网页中显示另一个网页的内容，类似于在一个页面中嵌套另一个页面
给iframe添加点击事件，控制菜单显示隐藏
dz13271116886的博客
06-17 1057
功能需求 页面分为 头部菜单 和 底部iframe盒子，头部的菜单可以伸缩，要求点击iframe的时候菜单会缩回去。 //点击其他区域，隐藏菜单 var iframe = document.getElementById('ra-iframe'); iframe.onload = function () { iframe.contentDocument.onclick = function () { $('.bottom-box').remove
深入理解CSS定位中的堆叠z-index
极客神殿
06-30 700
前面的话 对于所有定位，最后都不免遇到两个元素试图放在同一位置上的情况。显然，其中一个必须盖住另一个。但，如何控制哪个元素放在上层，这就引入了属性z-index 定义 利用z-index，可以改变元素相互覆盖的顺序。这个属性的名字由坐标系统得来，其中从左向右是x轴，从上到下是y轴。从屏幕到用户是z轴。在这个坐标系中，较高z-index值的元素比较低z-index值的元素离用户更近，这会导致较高z-...
iframe 显示页面和隐藏
wzx_it的专栏
11-30 1447
页面：           ---------------javascript-------------------------------          function AuditPop(id)     {         document.getElementById("viewAuditPop").src="/Admin/Contract/Aud
Flex中利用IFrame解决嵌入HTML时Flex组件被遮挡和IFrame被隐藏的问题
07-13
确保菜单组件的`zIndex`值高于IFrame，使其显示在IFrame之上。 2. **IFrame被隐藏**：这通常是因为IFrame的CSS样式设置不当，例如设置了`display:none`或者其父级元素的尺寸和位置问题。要解决这个问题，需要检查...
如何用iframe实现一个如何用iframe实现一个网页中隐藏一个网页，通过按钮位置重叠来窃取数据网页中隐藏一个网页，通过按钮位置重叠来窃取数据
11-04
Iframe通常用于在网页中嵌入其他网页内容，但它本身并不能直接用于隐藏整个页面或窃取数据。如果你想通过按钮位置重叠来创建一种视觉效果，让用户感觉某个部分被遮盖，但实际上访问的是另一个页面，可以这样做： 1....
java jsp使用flash播放mp4,(jsp/html)网页上嵌入播放器(常用播放器代码整理)
weixin_29577659的博客
03-19 1403
这个其实很简单，只要在HTML上添加以上代码就OK了，前提是你的电脑上已经安装了播放器，如RealPlay。还有更多的的播放器和设置可供选择：页面插入REAL播放器代码：页面插入Media Player播放器代码：页面插入Media Player(视频)播放器代码：BLOG中插入音乐播放器进入控制面板，点击“首页内容维护”，在“自定义空白面板”中，新增一个空白面板，勾选“源代码”后，粘贴以下代码：...
html页面元素优先级问题(z-index)
无名刀客
02-10 634
在开发中曾经遇到过z-index带来的页面层级遮盖问题。原帖太乱了，就发个效果图吧。     div被select隐藏的问题可以用一个隐形的iframe来解决。 DIV，SELECT，IFRAME都是绝对定位的情况下进行的。 在绝对定位的情况下，Z-INDEX是可以对他们起到作用的。 但是在页面布局实际中都是用相对进行的。只有在下拉菜单这样的情况是用绝对定位进行的。...
SELECT 元素在IE6中遮挡DIV的解决方法
行之苟有恒，久久必自芳
11-17 236
解决IE6 select z-index无效，遮挡div的bug 在最近的一个项目中，遇到了IE6 select遮挡div的bug，为了解决这个bug我查了很多资料，试图找到一个最最有效的方法，很多人是通过iframe的方法来解决，其实我查了国外的很多资料也是通过iframe的方法来解决的。今天我说说iframe解决的一般方法，已经使用jQuery插件bgiframe解决IE6 sel...
IE下 z-index 的各种坑
和上帝躲猫猫
02-14 913
z-index属性:　　 1.z-index : auto | number 2.z-index 属性设置元素的堆叠顺序，如果为正数，则离用户更近，为负数则表示离用户更远； 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面； 3.z-index 仅能在定位元素上奏效（position 属性值为 relative 或 absolute 或 fixed的对象）。   z-index
iframe+js实现页面全屏、淡入淡出切换
sweetyhyh的博客
05-27 3960
index.html Html代码   html>   head>   script   type="text/javascript">   //实现全屏   function Fkey(){        var WsShell = new ActiveXObject('WScript.Shell')        WsShell.SendKeys('{F11
cocoscreator设置层级zIndex使用注意事项
qq_40065163的博客
03-31 7480
node.zIndex=1; 值越大越在上层。按需赋值即可。 在制作滑动/滚动页面时用起来比较方便。 核心注意事项：在同一节点下，设置子节点的zIndex时，会改变节点顺序。假如读取node.children时，子节点顺序会因为设置的zIndex而改变。假如需要读取子节点 的话，建议另外拿一个节点数组存放第一次进入场景时的节点，后期使用这个数组即可。 ...
hover控制显示隐藏
02-19
### 使用 CSS `hover` 伪类控制元素显示和隐藏 当鼠标悬停在一个指定的父级元素上时，可以利用 CSS 的 `:hover` 伪类来更改子元素或其他关联元素的状态。对于显示和隐藏操作，通常会结合使用 `visibility` 属性[^1]。 #### 方法一：通过 `visibility` 控制显示与隐藏 下面是一个简单的例子，展示了如何使用 `visibility` 属性配合 `:hover` 实现这一功能： ```css /* 初始状态下隐藏目标元素 */ .hidden-element { visibility: hidden; } .parent:hover .hidden-element { /* 当鼠标悬浮于父容器之上时，让原本不可见的目标元素变得可见 */ visibility: visible; } ``` 这种方法的好处在于即使元素被设为不可见(`visibility:hidden`)，它仍然会在文档流中保留其位置，不会影响页面布局结构。 #### 方法二：借助其他定位技术如 `z-index` 另一种方式则是调整层叠顺序，即通过修改 `z-index` 值来达到视觉上的“隐藏”。不过需要注意的是，这并不真正意义上移除或隐藏元素；而是将其放置在较低层次，使其位于其他内容之后而难以察觉[^3]。 ```css .hidden-by-zindex { position: absolute; z-index: -1000; /* 将此元素置于非常低的位置 */ } .parent:hover .hidden-by-zindex { z-index: auto; /* 鼠标经过时恢复正常层级 */ } ``` 但是请注意，在实际开发过程中更推荐直接使用 `display:none/block` 或者上述提到的第一种方法 (`visibility`) 来处理真正的显隐逻辑，因为后者更加直观易懂且性能更好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值