js 如何 获取(fiexd的)元素到浏览器的高度

js 如何 获取(fiexd的)元素到浏览器的高度,第1张

获取浏览器窗口的高度,减去这个元素的top的高度,如果是用bottom定位,就直接获取bottom的值就好了啊比如id为fix就getElementById(‘fix’)stylebottom这样

<html>

  <head>

    <meta charset="utf-8" />

  </head>

  <body>

    <div id="div1" style="width:100px;height:100px;background:#F00;"></div>

  </body>

  <!-- 程序开始 -->

  <script>

    var oDiv=documentgetElementById('div1');

    var height=documentdocumentElementclientHeight;//假设这里的值是400

    oDivstylemarginTop=(height-90)+'px';

  </script>

  <!-- 程序结束 -->

</html>

按您的要求做到了,但您的提问并不严谨,如果页面超长,还应该把滚距离也加上去。

采用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属性即可。

以上就是关于js 如何 获取(fiexd的)元素到浏览器的高度全部的内容,包括:js 如何 获取(fiexd的)元素到浏览器的高度、获取浏览器窗口可视高度,减去一定数值,附给div的margin-top的属性、如何在HTML的iframe中,获取被调用的页面的高度,并作为这个iframe的高度等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9325457.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存