如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度

如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度,第1张

采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引发出同域、跨域两种情况。

由于客户端js使用浏览器的同源安全策略,跨域情况下,被嵌套页面如果想要获取和修改父页面的DOM属性会出现权限不足的情况,提示错误:Permission denied to access property 'document'。这是因为除了包含脚本的文档载入的主机外,同源策略禁止客户端脚本链接到其他任何主机或者访问其他任何主机的数据。这意味着访问一个web服务的javascript代码通常只有在它也驻留在Web服务本身所在的同一个服务器的时候才有用。

所以在跨域情况下,我们遇到的问题就是:父窗口无法获得被嵌套页面的高度,而且被嵌套页面也无法通过驻留在其服务器上的js修改父窗口Dom节点的属性。所以我们需要一个媒介,来获得被嵌套页面的高度同时又能修改主界面iframe节点的高度。

思路:现有主界面main在域a下,被嵌套页面B在域b下,被嵌套页面B又嵌套一个在域a下的中介页面A。当用户打开浏览器访问mailhtml的时候载入B,触发B的onload事件获取其自身高度,然后B载入A,并将高度值作为参数赋值给A的location对象。这样A就可以通过locationhash获得B的高度。(location是javascript里边管理地址栏的内置对象,比如locationhref就管理页面的url,用locationhref=url就可以直接将页面重定向url。而locationhash则可以用来获取或设置页面的标签值。比如>

关键代码:

iframe主页面:mainhtml

<iframe id="iframeB"  name="iframeB" src=">

iframe嵌套页面:Bhtml

<iframe id="iframeA" name="iframeA" src="" width="0" height="0" style="display:none;" ></iframe> 

<script type="text/javascript">

function sethash(){

hashH = documentdocumentElementscrollHeight; //获取自身高度

urlC = ">

中介页面:Ahtml

<script>

function pseth() {

var iObj = parentparentdocumentgetElementByIdx_x_x_x('iframeB');//A和main同域,所以可以访问节点

iObjH = parentparentframes["iframeB"]frames["iframeA"]locationhash;//访问自己的location对象获取hash值

iObjstyleheight = iObjHsplit("#")[1]+"px";// *** 作dom

}

pseth();

</script>

同域情况下就不用多说了,直接在被嵌套的页面B中获取其自身高度并 *** 作其父窗口main的dom属性即可。

1、父页面

代码如下:

<input type="text" id="name" value="zhangsan"/>

<a href="ahtml" target="_blank">预览</a>

2、子页面,也就是ahtml获取父页面中文本框的value

代码如下:

$(function(){

consoleinfo(windowopenerdocumentgetElementById("name")value);

});

这样控制台中出来的则是父页面文本框的值

在模式窗口使用windowdialogArguments,代表父窗口

windowshowModalDialog(url,obj,feature)的第二个参数

也就是第二个参数你可以传一个window对象过去,不要引号

在模式窗口就可以使用

windowdialogArgumentsdocumentgetElementById(text1)value

1、windowopen(pageURL,name,parameters)

pageURL 为d出窗口路径;

name 为d出窗口名称,也可以是系统自带的比如:_self, _blank,_top,_parent ;

parameters 为窗口参数(各参数用逗号分隔) ;

各项参数

其中yes/no也可使用1/0,pixel value为具体的数值,单位象素。

参数 取值范围 说明

alwaysLowered yes/no 指定窗口隐藏在所有窗口之后

alwaysRaised yes/no 指定窗口悬浮在所有窗口之上

depended yes/no 是否和父窗口同时关闭

directories yes/no Nav2和3的目录栏是否可见

height pixel value 窗口高度

hotkeys yes/no 在没菜单栏的窗口中设安全退出热键

innerHeight pixel value 窗口中文档的像素高度

innerWidth pixel value 窗口中文档的像素宽度

location yes/no 位置栏是否可见

menubar yes/no 菜单栏是否可见

outerHeight pixel value 设定窗口(包括装饰边框)的像素高度

outerWidth pixel value 设定窗口(包括装饰边框)的像素宽度

resizable yes/no 窗口大小是否可调整

screenX pixel value 窗口距屏幕左边界的像素长度

screenY pixel value 窗口距屏幕上边界的像素长度

scrollbars yes/no 窗口是否可有滚动栏

titlebar yes/no 窗口题目栏是否可见

toolbar yes/no 窗口工具栏是否可见

Width pixel value 窗口的像素宽度

z-look yes/no 窗口被激活后是否浮在其它窗口之上

常用示例:

windowopen ('pagehtml', 'newwindow', 'fullscreen'); //全屏

windowopen ('pagehtml', '_self', 'fullscreen = yes , height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no'); // 在当前页面d出一个全屏的窗口,并有详细的设置

popWin = windowopen('testjsp'); // 获取d出窗口对象,以便进行 *** 作

popWin focus(); // 聚焦窗口2、windowalert()参数,只有一个,显示警告框的信息;无返回值。

3、windowconfirm() 参数就只有一个。显示提示框的信息。按确定,返回true;按取消返回false。

4、windowprompt()参数,有两个,第一个参数,显示提示输入框的信息。第二个参数,用于显示输入框的默认值。返回,用户输入的值。

5、windowshowModalDialog()方法用来创建一个显示HTML内容的模态对话框。windowshowModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

showModalDialog()与showModelessDialog()的区别,在于showModalDialog()打开的窗口,置在父窗口上,必须关闭才能访问父窗口;showModelessDialog(),打开后不必关闭也可访问父窗口打开的窗口。使用方法:

vReturnValue = windowshowModalDialog(sURL [, vArguments] [,sFeatures]);

vReturnValue = windowshowModelessDialog(sURL [, vArguments] [,sFeatures]);

参数说明:

sURL--

必选参数,类型:字符串。用来指定对话框要显示的文档的URL。

vArguments--

可选参数,类型:变体。用来向对话框传递参数。传递的参数类型不限,包括数组等。对话框通过windowdialogArguments来取得传递进来的参数。

sFeatures--

可选参数,类型:字符串。用来描述对话框的外观等信息,可以使用以下的一个或几个,用分号隔开。

1dialogHeight :对话框高度,不小于100px,IE4中dialogHeight 和 dialogWidth 默认的单位是em,而IE5中是px,为方便其见,在定义modal方式的对话框时,用px做单位。

2dialogWidth: 对话框宽度。

3dialogLeft: 离屏幕左的距离。

4dialogTop: 离屏幕上的距离。

5center: {yes no 1 0 }:窗口是否居中,默认yes,但仍可以指定高度和宽度。

6help: {yes no 1 0 }:是否显示帮助按钮,默认yes。

7resizable: {yes no 1 0 } [IE5+]:是否可被改变大小。默认no。

8status: {yes no 1 0 } [IE5+]:是否显示状态栏。默认为yes[ Modeless]或no[Modal]。

9scroll:{ yes no 1 0 on off }:指明对话框是否显示滚动条。默认为yes。 参数传递:

要想对话框传递参数,是通过vArguments来进行传递的。类型不限制,对于字符串类型,最大为4096个字符。也可以传递对象,例如:

调用页面

<script>

var obj = new Object();

objname="LOVEJS";

windowshowModalDialog("modalhtm",obj,"dialogWidth=200px;dialogHeight=100px");

</script>

对话框页面

<script>

var obj = windowdialogArguments ;

alert("您传递的参数为:" + objname)

</script> 获取对象:

可以通过windowreturnValue向打开对话框的窗口返回信息,当然也可以是对象。例如:

调用页面

<script>

str = windowshowModalDialog("modalhtm",,"dialogWidth=200px;dialogHeight=100px");

alert(str);

</script>

对话框页面

<script>

windowreturnValue="在这里进行你要的 *** 作";

</script>

<html>

<head>

<title>js 获取div所填充内容的实际高度 </title>

</head>

<body>

<div id="div1">

百度知道是一个基于搜索的互动式知识问答分享平台,于2005年6月21日发布,并于2005年11月8日转为正式版。百度知道一直探索国际化发展,于2012年3月31日发布百度知道台湾版。

</div>

<button type="submit" onclick="test()">点击获取</button>

<script type="text/javascript">

function test() {  

        var oDiv = documentgetElementById('div1');  

        alert(oDivoffsetHeight);  

    }  

</script>

</body>

</html>

下面结合各上图介绍一下各个属性的作用:

一offsetTop属性:

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离,如果父元素中没有采用定位的,则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

返回值是一个整数,单位是像素。

此属性是只读的。

二offsetLeft属性:

此属性和offsetTop的原理是一样的,只不过方位不同,这里就不多介绍了。

三offsetWidth属性:

此属性可以获取元素的宽度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

四offsetHeight属性:

此属性可以获取元素的高度,宽度值包括:元素内容+内边距+边框。不包括外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

五clientWidth属性:

此属性可以返回一个元素的宽度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

六clientHeight属性:

此属性可以返回一个元素的高度值,值是:元素的内容+内边距。不包括边框、外边距和滚动条部分。

返回值是一个整数,单位是像素。

此属性是只读的。

七scrollLeft属性:

此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离,也就是元素被滚动条向左拉动的距离。

返回值是一个整数,单位是像素。

此属性是可读写的。

八scrollTop属性: 

此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离,也就是元素滚动条被向下拉动的距离。

返回值是一个整数,单位是像素。

 JS子窗口调用父窗口的方法:

 框架(iframe)形式,这时用到是windowparent, windowparent能获取一个框架的父窗口或父框架。顶层窗口的parent引用的是它本身。可以用这一点特性来判断这个窗口是否是顶层窗口。详情如下:

1、1html代表的是父窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "

<html xmlns="

<head>

<meta 

2、2html代表的子窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "

<html xmlns="

<head>

<meta ;

这时在子窗口(iframe窗口)所做的改变,会改变父窗口中username的值。

以上就是关于如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度全部的内容,包括:如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度、js子窗口如何获取父窗口输入框值、js 模式对话框里获取父窗口html元素值,娶不到求助!!!![等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/10145635.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存