A网页高度随B内容而自然变化兼容各种浏览器
今天是星期一，昨天又没有睡好，眼睛干干的，还有点痛疼，于是不想干啥。但是心里又不觉得过意不去，浪费时间呀，考虑再三把自己前面实现的一个东西发了上来。算是今天的功劳，没有过多的文字描述，纯粹是贴图片和代码，这个功能其实在一个群里有人问过，我也发了。不知道他用了没有。
实现效果如下图：
关键代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="iframeparent1.aspx.cs" Inherits="autoSearch.iframeparent1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function addEvt(ifr) {
var doc = ifr.contentWindow.document;
doc.onclick = function () {
ifr.style.height = (document.all ? doc.body.scrollHeight : doc.body.offsetHeight) + 'px';
// ifr.style.height = doc.body.clientHeight//有根节点可以使用根节点，兼容性比较好，opera，safari，google的浏览器都可以兼容，如果使用body.offsetHeight只在ff下有效果
}
ifr.style.height = doc.body.scrollHeight + 'px'; } </script> <style type="text/css">
#myiframe
{ }
</style>
</head>
<body〉
<form id="form1" runat="server">
<div>显示条数：<asp:TextBox ID="TextBox1" runat="server">5</asp:TextBox>
<asp:Button ID="btnset" runat="server" Text="设置" onclick="btnset_Click" /> </div> <div>
<iframe src="iframeson1.aspx?hc=<%=hc%>" id="myiframe" name="myiframe" width="100%" align="middle"
scrolling="no" frameborder="0" target="_parent" hspace="0" vspace="0" onload="addEvt(this)" ></iframe> </div>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="iframeson1.aspx.cs" Inherits="autoSearch.iframeson1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css" >
body
{
text-align:center; height:auto;
}
#data th{background:#EEE; border-bottom:1px solid #CCC; padding:4px; text-align:left;}
#data td{border:1px solid #EEE; padding:4px;}
.ou{background-color:#FFF;}
.ji{background-color:#CCC;} .a_s2
{
font-size: 16px;
text-decoration: none;
display: block;
font-weight: bold;
text-align: center;
height: 35px;
line-height: 35px;
width: 100px;
background: #0177FF;
color: #fff;
float:right;
}
</style>
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//异步请求
$("#btnSearch").bind("click", function () {
$("#dadiv").html("");
var i = $("#TextBox1").val();
$.ajax({
type: "GET",
url: "iframetable.aspx",
data: "sortBy=" + i,
beforeSend: function (XMLHttpRequest) {
//$("#sdiv").html("<img style='margin:40px 0 0 10px;' <img src='images/022.gif' /> 数据加载中...");
},
success: function (fanhuidata) {
//$("#sdiv").remove($("#spadd").html());
$("#dadiv").append(fanhuidata);
window.parent.document.getElementById("myiframe").style.height = $(document.body).height() + 50 + "px";
linecolor();
},
error: function (xx) { alert(xx) }
}); // alert("9999");
// var frm = window.parent.document.getElementById("myiframe");
// // var doc = ifr.contentWindow.document;
// alert("1010");
// alert(frm);
// onmousedown = function () {
// // ifr.style.height = (document.all ? doc.body.scrollHeight : doc.body.offsetHeight) + 'px';
// alert(frm.frmame);
// ifr.style.height = doc.body.clientHeight//有根节点可以使用根节点，兼容性比较好，opera，safari，google的浏览器都可以兼容，如果使用body.offsetHeight只在ff下有效果
// }
});
}); function linecolor() {
var obj = document.getElementById("data");
for (var i = 0; i < obj.rows.length; i++) {
i % 2 == 0 ? obj.rows[i].className = "ou" : obj.rows[i].className = "ji";
}
} function getObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
} function showHide(e, objname) {
var obj = getObject(objname);
if (obj.style.display == "none") {
//$(obj).show('0.5');
obj.style.display = "";
//e.className = "minus";
//e.src = "../images/newhotels/i2.jpg"
// $(e).parent().parent().removeClass("bg1"); //tr
} else {
obj.style.display = "none";
//e.src = "../images/newhotels/i3.jpg"
// $(e).parent().parent().addClass("bg1"); //tr
// e.className = "plus";
}
}
</script>
</head>
<body onload="linecolor();" >
<form id="form1" runat="server">
<div>显示条数： <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="set" runat="server" Text="设置" onclick="set_Click" /></div>
<div class="a_s2" id="btnSearch">查看价格 </div>
<div style="margin:0 auto; text-align:center;" id="dadiv">
<%getdata(5); %>
<%--<table style=" width:100%; height:auto" id="data">
<tr><td style="height:10px;width:100%;" onclick="showHide(this,'detailsItem_1')">我是第1条</td></tr>
<tr id="detailsItem_1" style="display:none"><td style="height:50px;width:100%;">我是内容1，我是内容1</td></tr>
<tr><td style="height:10px;width:100%;" onclick="showHide(this,'detailsItem_2')">我是第2条</td></tr>
<tr id="detailsItem_2" style="display:none"><td style="height:50px;width:100%;">我是内容2，我是内容2</td></tr>
<tr><td style="height:10px;width:100%;" onclick="showHide(this,'detailsItem_3')">我是第3条</td></tr>
<tr id="detailsItem_3" style="display:none"><td style="height:50px;width:100%;">我是内容3，我是内容3</td></tr>
<tr><td style="height:10px;width:100%;" onclick="showHide(this,'detailsItem_4')">我是第4条</td></tr>
<tr id="detailsItem_4" style="display:none"><td style="height:50px;width:100%;">我是内容4，我是内容4</td></tr>
</table>--%>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text; namespace autoSearch
{
public partial class iframetable : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
int i = int.Parse(Request.QueryString["sortBy"].ToString());
getdata(i);
}
}
public void getdata(int i)
{
StringBuilder sb = new StringBuilder();
sb.Append("<table style=' width:100%; height:auto'id='data'>");
for (int n = ; n <= i; n++)
{
sb.Append("<tr><td style='height:10px;width:100%;'onclick='showHide(this,\"detailsItem_" + n + "\")'>我是第" + n + "条</td></tr>");
sb.Append(" <tr id='detailsItem_" + n + "' style='display:none'><td style='height:50px;width:100%;'>我是内容" + n + "我是内容" + n + "</td></tr>");
}
sb.Append("</table>");
Response.Write(sb.ToString());
}
}
}
上面的代码是我花了三天时间在网上找的，然后自己修改而成。大家可以根据自己的需求更改。也是学习iframe的好例子。 这算是一次分享吧！
A网页高度随B内容而自然变化兼容各种浏览器的更多相关文章
- 真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变
今天有朋友问到我关于"iframe自适应高度"的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定.期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条.也就是 ...
- JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- 函数语法：JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度（转载）
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- JS 获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...
- 05网页<div></div>块内容
网页<div></div>块内容 <header>此处为新 header 标签的内容</header> <navigation>此处为新 n ...
- ASP.NET中Literal控件的使用方法（用于向网页中动态添加内容）
原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就 ...
- textarea高度随文本内容变化，且不出现滚动条
通常文本域的写法如下 <textarea type="text" class="form-control pull-left" id="desc ...
随机推荐
- Spring-1-H Number Sequence（HDU 5014）解题报告及测试数据
Number Sequence Time Limit:2000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Pro ...
- windows 常用cmd命令
为了减少使用鼠标的频次,熟记一些常用应用的快捷键与系统本身常用的命令是必须的,以下记录一些常用的windows系统命令. 查看网络端口占用情况 :netstat -ano | findstr 8080 ...
- quic协议实践
QUIC实践 环境Ubuntu14.x86_64 gcc4.8 python2.7 编译QUIC服务器和客户端 下载 git clone https://github.com/google/proto ...
- react.js 引用 NavBar 报错svg-spite-loader
Navbar iconName="false" 配置 改为 iconName={this.props.bool}
- 理解RESTful 架构
REST是所有Web应用都应该遵守的架构设计指导原则. Representational State Transfer,翻译是”表现层状态转化”. 面向资源是REST最明显的特征,对于同一个资源的一组 ...
- 为MarS Board安装无线网卡Linux驱动
玩了几天MarS Board,发现要了解Linux是如何工作的,从嵌入式开发板玩起最有效率.因为会遇到无数的问题和未知领域,然后在解决问题的过程中有深入了解Linux的机会. 为这块开发板专门买了 ...
- Web前端开发学习笔记（一）
最近在复习Web前端的开发知识,于是就把大二上学期曾经学过的东西拿出来复习一遍,把自己在做曾经的作业时遇到有意义的点都记下来吧. Homework1:http://my.ss.sysu.edu.cn/ ...
- 20145313张雪纯 《Java程序设计》第4周学习总结
20145313张雪纯 <Java程序设计>第4周学习总结 教材学习内容总结 6.1何谓继承 程序代码重复时,可以把相同的程序代码提升为父类.继承除了可避免类之间重复的行为定义以外,还有i ...
- 20145321 《Java程序设计》第5周学习总结
20145321 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 1.Try.catch:Java中所有错误都会被打包为对象,通过try和catch语法可以对代表错误的对象做 ...
- 通过map文件了解堆栈分配(STM32、MDK5)--避免堆栈溢出
环境:STM32F103C8T6,MDK5 在最近的一个项目的开发中,每当调用到一个函数,程序就直接跑飞.debug跟进去看不出什么逻辑错误,但发现函数内局部变量声明之后,全局变量的值被清零,后来查看 ...