`

在iframe的name不定时,根据被包含页面大小动态改变iframe的大小(by quqi99)

 
阅读更多

在iframe的name不定时,根据被包含页面大小动态改变iframe的大小(by quqi99)



作者:张华 发表于:2007-10-05 ( http://blog.csdn.net/quqi99 )

版权声明:可以任意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明。

假如A页面中有一个iframe元素,嵌入了页面B,

方法一:那么在页面B中加入即可:

<script language="javascript">
<!--
function toppage()
{
//CSS中:onload: expression(frameElement.style.height = document.body.clientHeight + 10);

// window.frameElement指父一级frame

// window.frameElement.style.height = document.body.scrollHeight + 10;
if (self.location!=top.location){
parent.document.all(self.name).height=document.body.scrollHeight + 30;

}
}
-->
</script>

</head>
<body onload="toppage()">

方法二:在页面A中加入:

<iframe id="kefu1frame" name="kefu1frame" src="http://172.17.1.122:8081/lyb/kefu1.jsp "
frameborder="0" scrolling="no" style="width:100%;height:expression(document.getElementById('kefu1frame').document.body.clientHeight + 10);"></iframe>

以上两种方法都有一个共同的毛病,不能支持跨域访问,游览器都禁止了不同顶级域名的iframe与其父窗口之间的通信,IE不允许跨站点得到页面的document.height信息,体现为js错误就是无权访问,为此,我们想到通过IE的剪贴板来进行数据的中转。方法三如下:

在页面B中:

<script language="javascript">
<!--
function toppage()
{
//游览器都禁止了不同顶级域名的iframe与其父窗口之间的通信,IE不允许跨站点得到页面的document.height信息,体现为js错误就是无权访问
//在两个页面中均设置document.domain="abc.com";
//window.frameElement.style.height = document.body.scrollHeight + 10;
/**
if (self.location!=top.location){
parent.document.all(self.name).height=document.body.scrollHeight + 30;

}**/
//先将高度数据取出来放入剪贴板中
var tts = window.clipboardData.getData('text');
window.clipboardData.setData('text',String ('frameHeight=' + document.body.scrollHeight) +"x"+tts);
//window.clipboardData.setData('text',String (document.body.scrollHeight + 10));




}
-->
</script>
<body onload="toppage()">

在页面A中:

<script language="javascript">
function resetIframeHeight(obj){
var str=window.clipboardData.getData('text');
if(str.match(/^frameHeight=/d+x/)){
obj.style.height=parseInt(str.match(//d+/))+'px'; //置高度
window.clipboardData.setData('text',str.replace(/^frameHeight=/d+x/, '')); //重置剪贴板的内容
}
}
</script>
<iframe SCROLLING="no" src="http://172.17.1.122:8081/lyb/kefu1.jsp " width="100%" height="700px" frameborder="0"
onload="resetIframeHeight(this);">
</iframe>

下面是通过script标签来解决问题

比如:在 www.a.com 域名下的页面, 无法用ajax请求www.b.com/ajax.php下的内容.
这里给出一个用JS模拟ajax的方式实现跨域, 但仅仅局限于GET模式!
在 <script> 标签中, src的属性是可以设置非本域下的地址的. 借助此特点,即可模拟ajax的方式实现跨域.
假设 www.a.com 域名下的程序 需要通过ajax方式提交数据到 www.b.com 下的login.php?username=****&passwod=****实现登陆判断.
实现方式如下:
在www.a.com内动态创建JS的方式来加载www.b.com的内容,代码如下
JavaScript代码如下:
//此代码放在www.a.com域名下
var head = document.getElementsByTagName("head")[0];
var js = document.createElement("script");
js.src = "http://www.b.com/login.php?username=****&passwod=****";
js.onload = js.onreadystatechange = function(){
if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
head.removeChild(js);
//JS加载完毕了. 类似于ajax请求完成.
//执行是否登陆成功的判断等操作
}
}
head.appendChild(js);
这只是一个简单的例子,需要b.com下的login.php做好配合,login.php通过GET取得传入值,并生成JS的登陆标记.
JS加载完成后,根据JS标记判断登陆的状态,提示登陆成功或失败.即可完成要求,代码兼容常见浏览器.
当然缺陷也很明显,只能支持GET的方式提交数据

上面script标签的这种方式,当被嵌的页面上有复杂的ajax调用时,也是不好使的,可以像下面这样:

1)在被调用页加上:

<iframe id="ifrAgent" name="ifrAgent" src="" width="0" height="0" style="display:none;" ></iframe>
<script type="text/javascript">
function sethash(){
var hashH =/*取你们页面的高度值*/;
urlA = "http://fe.baidu.com/~zuoli/agent.html "; /*具体的地址后续定*/
document.getElementById("ifrAgent").src=urlA+"#"+hashH;
}
window.onload=sethash;
</script>
2)在调用页取出高度,进行设置

var invokedIFrame= document.getElementById( " invokedIFrame" )

var locationUrlHash= invokedIFrame.getElementById( " ifrAgent" ).src
invokedIFrame.style.height = locationUrlHash.split( " # " )[ 1 ].split( " | " )[ 0 ] + " px " ;

不过ajax更新数据还有个问题。。。。不能只绑在onload事件上了 你们的请求结果改变我就得重新设置高度 看来得绑选择条件的点击事件了上 这样会有另一个问题。。。。

分享到:
评论

相关推荐

    quqi.rar_mtk_mtk software_mtk平台

    MTK平台的多功能下載軟件,適用所有MTK手機....

    视频播放源代码directshow开发

    用directshwo开发的视屏播放器,比较简单,有时候会出错

    dm8_setup_win64_ent_8.1.1.45_20191121.iso

    国内最好的数据库达梦DM8,曲奇网盘下载链接:https://quqi.com/s/1243222/wcOZdaWgUlHrwhOk

    数据库实验.py

    数据库实验.py

    机器学习技术对心电图 (ECG) 信号进行分类matlab代码.zip

    1.版本:matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    学会学习心理课拒绝诱惑:自制力培养手册.docx

    学会学习心理课拒绝诱惑:自制力培养手册.docx

    基于matlab+Simulink模拟的微电网系统包括包括电源、电力电子设备等+源码+开发文档(毕业设计&课程设计&项目开发)

    基于matlab+Simulink模拟的微电网系统包括包括电源、电力电子设备等+源码+开发文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 项目简介: 这是一个完整的微电网模型,包括电源、电力电子设备、使用MatLab和Simulink的负载和电源模型。该模型基于费萨尔·穆罕默德的硕士论文《微网格建模与仿真》。 什么是微电网 模拟的微电网使用一组电源和负载在与任何集中式电网(宏电网)断开连接的情况下工作,并自主运行,为其局部区域提供电力。该仿真对微电网在稳态下进行建模,以分析其对输入变化的瞬态响应。 此模拟的目的 对系统进行全年模拟,测量负载、产量、电压和频率。 给出简化规划和资源评估阶段的方法。

    Translucent Image - Fast Blurred Background UI v4.4.1

    Unity插件 Translucent Image 可帮助你构建精美的模糊背景 UI,例如在 iOS/MacOS/Windows 10 Fluent 设计中的 UI。 与许多其他背景模糊解决方案不同,Translucent Image 采用一种对性能影响最小的高效算法,因此用户可以享受更高的帧速率和更长的电池寿命。不仅如此,当你将模糊调高时,它还可以产生完美的平滑效果,而其它资源在高度模糊时会呈现难看的块状图像。

    基于卷积神经网络的人脸识别(包括数据集)

    基于卷积神经网络的人脸识别卷积神经网络(Convolutional Neural Networks, CNNs 或 ConvNets)是一类深度神经网络,特别擅长处理图像相关的机器学习和深度学习任务。它们的名称来源于网络中使用了一种叫做卷积的数学运算。以下是卷积神经网络的一些关键组件和特性: 卷积层(Convolutional Layer): 卷积层是CNN的核心组件。它们通过一组可学习的滤波器(或称为卷积核、卷积器)在输入图像(或上一层的输出特征图)上滑动来工作。 滤波器和图像之间的卷积操作生成输出特征图,该特征图反映了滤波器所捕捉的局部图像特性(如边缘、角点等)。 通过使用多个滤波器,卷积层可以提取输入图像中的多种特征。 激活函数(Activation Function): 在卷积操作之后,通常会应用一个激活函数(如ReLU、Sigmoid或tanh)来增加网络的非线性。 池化层(Pooling Layer): 池化层通常位于卷积层之后,用于降低特征图的维度(空间尺寸),减少计算量和参数数量,同时保持特征的空间层次结构。 常见的池化操作包括最大池化(Max Pooling)和平均

    基于java进行的软件测试实验代码.zip

    基于java进行的软件测试实验代码.zip

    【优化求解】遗传算法求解多城市多应急物流中心选址问题【含Matlab源码 1724期】.zip

    【优化求解】遗传算法求解多城市多应急物流中心选址问题【含Matlab源码 1724期】.zip

    结构型设计模式(7种)

    结构型设计模式(7种)

    课设毕设基于SpringBoot+Vue的旧物置换网站 LW+PPT+源码可运行.zip

    课设毕设基于SpringBoot+Vue的旧物置换网站 LW+PPT+源码可运行.zip

    微信小程序源码 健康饮食助手 健康菜谱app 下载

    健康菜谱App是一款专为追求健康饮食生活的用户设计的应用程序。它提供了一系列精心挑选的营养食谱,旨在帮助用户做出美味又健康的餐点。以下是健康菜谱App的核心特点: 丰富食谱库:包含数百种健康食谱,涵盖早餐、午餐、晚餐及小吃等。 营养信息标注:每道食谱都配有详细的营养信息,包括卡路里、蛋白质等。 个性化推荐:根据用户的饮食习惯和健康目标,智能推荐合适的菜谱。 食材替换建议:提供食材替换选项,帮助用户根据自己的口味和需求调整食谱。 一键购物清单:自动生成购物清单,方便用户购买所需食材。 步骤图解:每道食谱都配有清晰的步骤图解,即使是烹饪新手也能轻松上手。 社区分享功能:用户可以在社区中分享自己的烹饪成果,交流烹饪心得。 无广告干扰:提供无广告的用户体验,让用户专注于烹饪和享受美食。 健康菜谱App是健康饮食追求者的得力助手,无论是健身爱好者、素食主义者还是普通家庭,都能找到适合自己的健康食谱。立即下载健康菜谱App,开启健康饮食新篇章!

    课设毕设基于SpringBoot+Vue的职称评审管理系统 LW+PPT+源码可运行.zip

    课设毕设基于SpringBoot+Vue的职称评审管理系统 LW+PPT+源码可运行.zip

    MikelProjectDemo-dev.zip

    MikelProjectDemo-dev

    基于 SpringBoot 开发的超简洁音乐播放器.zip

    基于springboot的java毕业&课程设计

    HUWEI eNSP课程作业

    HUWEI eNSP课程作业

    基于SpringBoot、SSH和Redis的NBA论坛网站.zip

    基于springboot的java毕业&课程设计

Global site tag (gtag.js) - Google Analytics