简单明了的iFrame页面显示隐藏简单明了的例子（3），拿来改改直接用吧

最新推荐文章于 2024-02-23 20:58:27 发布
原创 最新推荐文章于 2024-02-23 20:58:27 发布 · 2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe #div #input #stylesheet #table #button

<%@ page contentType="text/html; charset=GBK" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<link rel="stylesheet" href="../../style/style.css">s
<script>
function querystu (ppp)
{
 target = document.getElementById(ppp);
  target.style.display="block";
}
 </script>
<body bgcolor="#FFCCCC" text="#3300CC"leftmargin="0" topmargin="0">
<table width="70%" border="1" align="center">
<form action="" name="" method="post">
  <tr> 
    <td width="18%" height="25%"><div align="center">按学生id</div></td>
    <td width="32%" height="25%"><input type="text" name="textfield" style="width:98%"></td>
    <td width="15%" height="25%"><div align="center">按姓名</div></td>
    <td width="35%" height="25%"><input type="text" name="textfield2" style="width:98%"></td>
  </tr>
  <tr> 
    <td height="25%"><div align="center">按年龄</div></td>
    <td><select name="age" style="width:98%">
     <option>8-10</option>
  <option>11-18</option>
  <option>19-25</option>
  <option>26-30</option>
  <option>30以上</option>
 </select></td>
    <td height="25%"><div align="center">按性别</div></td>
    <td>
 <select name="sex" style="width:98%">
    <option>男</option>
    <option>女</option>
 </select>
 </td>
  </tr>
  <tr> 
    <td height="25%"><div align="center">按登记时间</div></td>
    <td colspan="3"><input type="text" name="textfield5" style="width:99%" readonly=""></td>
  </tr>
  <tr>
    <td colspan="4"> <div align="center">
        <input type="button" name="button" value="查询" onclick="javascript:querystu('show')">
  &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" name="reset" value="取消">
      </div></td>
  </tr>
<form>
</table>
<p>
<table id="show" style="display:none">
<iframe width=800 height=600  frameborder="0" src="lookStudentList.jsp">

</iframe>
</table>
<div align="center"></div>
</body>
</html> 
 
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.youkuaiyun.com/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
11.WebView封装设计实践
杨充
11-26 1374
目录介绍 01.前沿说明 1.1 案例展示效果 1.2 该库功能和优势 1.3 相关类介绍说明 1.4 WebView知识点 02.如何使用 2.1 如何引入 2.2 最简单使用 2.3 常用api 2.4 使用建议 2.5 异常状态类型区分 2.6 该库流程图 03.js调用 3.1 Java调用js方法 3.2 js调用java方法 3.3 js的调用时机分析 3.4 js交互...
Iframe的隐藏和显示
rmzhang33的专栏
09-15 3173
Iframe的隐藏和显示 原作者：追风                  人气：101 在...之间加入下列代码：显示iFrame隐藏iFrame
iframe使用实例
08-09
iframe使用实例，简单名了，演示iframe的基本功能
IFrame简单例子
05-26
IFrame
iframe的一个例子
weixin_30879833的博客
08-08 184
<iframe name="pollmain" id="pollmain" width="100%" src="../project_operation/fwpjlr.do?method=fwxxLrDetail&id=<c:out value='${projectInfo.id}'/>" scrolling="no" frameborder="no" marginwi...
IFrame的显示和隐藏
L-BAKE
12-01 4645
<br />在<body>...</body>之间加入下列代码： <div id="bodyframe" style="VISIBILITY: hidden" mce_style="VISIBILITY: hidden"> <IFRAME frameBorder=1 id=heads src="framepage.htm" mce_src="framepage.htm" style="HEIGHT: 200px; LEFT: 220px; POSITION: absolute; TOP: 200px;
软件测试 Web自动化测试 基础知识 HTML CSS JavaScript
qq_740785701的博客
04-02 4130
html,css,js
软件面试题
热门推荐
qq_56161965的博客
11-02 1万+
分布式系统是由一组通过网络进行通信、为了完成共同的任务而协调工作的计算机节点组成的系统。分 布式系统的出现是为了用廉价的、普通的机器完成单个计算机无法完成的计算、存储任务。 其目的是利 用更多的机器，处理更多的数据。 1. 作用域的原理 测试理论 1.请说说需求文档，测试计划，测试用例，测试报告，操作手册，bug(缺陷报告)都包含哪些内容 2.你们公司的缺陷处理流程 我上一家公司的测缺陷处理流程是这样的 开发修复完缺陷之后,我用git下载开发修复之后的代 码再进行测试..... 测试人员发现了缺陷...
一篇学会Selenium
weixin_46198734的博客
02-23 2911
​ Selenium是一个用于Web应用程序自动化测试的工具，它可以模拟用户在浏览器中的操作，如点击、输入等，以检测应用程序的功能和性能。
js如何设置在iframe框架中指定div不显示
10-26
在iframe框架中指定div不显示，有多种实现方法，接下来与大家分享下使用js的具体实现，感兴趣的朋友可以参考下
iframe嵌入网页如何实现隐藏部分内容
qq_35641191的博客
12-28 2771
iframe嵌入网页如何实现隐藏部分内容
【iframe】关于一个页面多个iframe,并隐藏显示的问题.
weixin_45932148的博客
03-28 3299
问题描述 提示：这里描述项目中遇到的问题： 一个页面有两个及两个以上的iframe,加载页面时,隐藏其中一个,点击显示另一个时,不执行JS. 原因分析： 可能是父页面在加载时就已经执行了.你在点击显示后,iframe页面的内容不知道加载到哪里去了. 解决方案： 动态给iframe赋src值,并在父页面中设置全局变量,只有在执行第一次的时候才去赋值,其它时候只隐藏或者显示. var tt1= false; var tt2 = false; //设置各个列表展示或者隐藏 function TestSho
iFrame应用实例讲解——页面无需刷新的异步文件上传！
敏而好学 —— Eric6的专栏
09-06 1万+
说到iframe，现在用它的人是越来越少了，并且很多人都相信它应该被AJAX所取代，的确如此，因为AJAX太出色了。 不过有一种情况的实现我还是选择了iframe，这就是本文要说的文件的异步上传，感兴趣的可以试试，如果用原生的AJAX来实现应该是要复杂的多。 先来给初学者补补基础知识： 1. 在iframe标签一般会指定其name特性以于标识； 2. 在form表单中通过action(目标地址)和target(目标窗口，默认为_self)来确定提交的目的地...
使用iframe标签嵌入第三方网页并隐藏网页头部导航栏和底部网页信息
Nicerlee的博客
11-29 8765
1、解决方案 通过对<div>标签高度控制来隐藏第三方页面底部内容，设置<iframe>标签中的margin-top上部边距来隐藏页面的头部导航栏信息等。 代码实现(以百度首页展示为例)： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style&gt...
iframe的显示和隐藏
weixin_30387423的博客
09-05 666
<div id="bodyframe" style="visibility:hidden"> <iframe id="ifm1" src="Default2.aspx" style="z-index: 100; left: 188px; position: absolute; top: 175px"></iframe> <...
隐藏ifarme页面内的元素
前端金牌摸鱼达人
07-14 5110
隐藏ifarme页面内的元素
iframe 显示页面和隐藏
wzx_it的专栏
11-30 1500
页面：           ---------------javascript-------------------------------          function AuditPop(id)     {         document.getElementById("viewAuditPop").src="/Admin/Contract/Aud
【JavaScript】【Vue】中使用 iframe 标签引用html项目、隐藏iframe标签内容
FAAAAAAAN的博客
02-22 1553
vue、iframe、html
iframe嵌入页面修改层级
最新发布
08-01
在网页开发中，`<iframe>` 是一种常用的嵌入内容的方式，它允许将一个 HTML 页面嵌入到另一个页面中。然而，`<iframe>` 的层级显示问题（如 `z-index` 的设置）可能会因为浏览器渲染机制或与其他元素的交互而变得复杂。以下是关于 `<iframe>` 层级显示和 `z-index` 设置的一些关键点： 1. **`z-index` 设置为 `-1`** 可以通过将 `<iframe>` 的 `z-index` 设置为 `-1`，使其显示在页面的最底层。这种方式适用于希望 `<iframe>` 被其他页面元素覆盖的情况。需要注意的是，如果页面中存在其他使用 `z-index` 的层，可能会导致 `<iframe>` 无法正确显示在最底层。 2. **Flex 容器与 `<iframe>` 的层级问题** 如果 `<iframe>` 被嵌入到一个使用 Flex 布局的容器中，且容器内有其他元素（如 Flash 内容），则 `<iframe>` 可能会被覆盖。为了确保 `<iframe>` 能够正常显示，需要将 Flex 容器及其上层元素的背景设置为透明。这样可以避免 `<iframe>` 被其他元素遮挡。 3. **动态调整 `<iframe>` 的 `z-index`** 在某些交互场景中，可能需要动态调整 `<iframe>` 的层级。例如，当鼠标移动到 `<iframe>` 上时，可以将其 `z-index` 设置为较高的值（如 `1`），以便用户能够与 `<iframe>` 进行交互；当鼠标离开时，再将其 `z-index` 恢复为较低的值（如 `-1`）。这种方法可以确保 `<iframe>` 在需要时显示在最上层。 4. **浏览器兼容性与 `<iframe>` 的 `z-index`** 在某些浏览器中，`z-index` 的行为可能会与预期不符，尤其是在涉及表单元素（如下拉菜单）或 Flash 内容时。为了解决这些问题，可以尝试通过插入一个不可见的 `<iframe>` 来覆盖这些元素，从而确保目标层能够正确显示在最上层。 5. **示例代码** 以下是一个简单的示例，展示了如何通过 CSS 和 JavaScript 动态调整 `<iframe>` 的 `z-index`： ```html <style> .iframe-container { position: relative; } .iframe-container iframe { position: absolute; z-index: -1; width: 100%; height: 100%; } .iframe-container:hover iframe { z-index: 1; } </style> <div class="iframe-container"> <iframe src="https://www.example.com"></iframe> </div> ``` 在这个示例中，当鼠标悬停在 `<iframe>` 上时，它的 `z-index` 会被动态调整为 `1`，从而显示在其他元素之上。 ### 相关问题 1. 如何在多个 `<iframe>` 之间切换时保持内容的正确加载和交互？ 2. 在使用 Flex 布局时，如何确保 `<iframe>` 不被其他元素覆盖？ 3. 为什么在某些浏览器中 `z-index` 对 `<iframe>` 的效果不明显？ 4. 如何通过 JavaScript 动态调整 `<iframe>` 的层级？ 5. 在嵌入 `<iframe>` 时，如何解决页面中表单元素与 `<iframe>` 的层级冲突？
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值