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

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

在vue中可以通过给标签加ref属性，就可以在js中利用ref去引用它，从而 *** 作该dom元素。

以下是个例子：

Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室，同样也能满足3D自由艺术家。

参与项目：

《阿凡达》《2012》《赤壁》《斯巴达克斯》《死不瞑目》《尸城30夜》《功夫熊猫》《异形大战铁血战士》《微光城市》《神奇四侠》《致命拜访》《冒牌天神》《与王一夜》《老友与钱》《加勒比海盗》《ALAUID》《假结婚》《特种部队》《失落的大陆》《终结者》《坠入地狱》《Dragonball Evolution》《女同志吸血鬼杀手》《爱丽丝梦游仙境》《诸神之战》《驯龙记》《狼人》《闰年》《可爱的骨头》《魔法奇幻秀》《美少女特工队》《吉诺密欧与朱丽叶》《纳尼亚传奇》《猫头鹰王国》《歪小子斯科特》《卑鄙的我》《最后的风之子》《怪物史瑞克》《波斯王子》《饥饿游戏》《地心历险记》《雨果》《亚瑟圣诞》《丁丁历险记》《惊天战神》《超级8》《雷神》《大战外星人》《本杰明·巴顿奇事》《马达加斯加》《澳洲乱世情》《空中杀手》《夺宝奇兵》《奇幻精灵事件簿》

这个代码肯定可以查到的，这是官方查DOM属性的API，查到的属性其实也很有限，但是高度是绝对可以查到的，查不到高度的同学可以去看官方文档！

首先给你的xml对象一个id：

<view class="usermotto" style="height:213px;" id='mjltest'/>

然后在js里，用一个SelectorQuery来选择对应id的节点（注意id前面要加一个#号），就可以获取对应节点的属性，包括高度。

//创建节点选择器

var query = wxcreateSelectorQuery();

queryselect('#mjltest')boundingClientRect()

queryexec(function (res) {

//res就是 所有标签为mjltest的元素的信息 的数组

consolelog(res);  

//取高度

consolelog(res[0]height);

})

在小程序中没有DOM *** 作的方法，所以获取不到相应的DOM节点进行高度设置。

解决方案

1css方案

<view class="{{isFold 'flod':'extend' }}" bindtap="flodFn">

我是一个很长的文字

</view>

flod{

//折叠样式

}

extend{

//展开样式

}

flodFn:function(){

thissetData({

isFold: !thisisFold

});

}

2动态渲染方案

<view bindtap="flodFn">

<view wx:if="{{isFold}}" >

我是一个很长的文字

</view>

<view wx:else>

我是一个很长的文字

</view>

</view>

flodFn:function(){

thissetData({

isFold: !thisisFold

});

}

高级

如果是列表，需要结合复杂数据处理，建议阅读

设 你已经拿到高度 并将其赋值给JS变量 domHeight;并获取了了需要赋值的标签dom

这个时候你只要获取你需要赋值的标签。

JQ：$(dom)height( domHeight );

javascript : domstylecssText += ";height:100px;"

需求是这样的，一个聊天窗口，对话框你一句我一句，然后这个对方的回答可能很长，这个时候要检测对方的回答渲染上去后，对应的那条话dom高度有没有超出指定高度，如果超出，就给他多余部分隐藏，并且那条话显示查看更多的按钮，

一开始想的是每一句对话都用各自的ref，然后useEffect每次都去检测ref上的高度，但是其实这样不对，ref如果先绑上了，ref上的属性再变动，是不会触发重新render的也就没法检测到，

看到一个大佬的博客

>

最近做了一个项目，需要表格的高度跟着浏览器的高度变化，页面不会出现滚动条，并且分页器一直在浏览器的底部

表头的搜索框的高度可以伸缩，不是固定的，这就需要监听到搜索框的高度，用浏览器的高度减去搜索框的高度和分页器的高度就是表格的高度了

先自定义监听方法吧，如下：

现在组件内注册

directives方法跟data，methods方法是平级的

需要监听的组件绑定这个方法，这里是监听表头的高度

这时就已经监听到的表头的宽高变化了，就可以拿出来用了

$('h2#answers-title')offset()top-$(document)scrollTop();

$('h2#answers-title')offset()top h2#answers-title元素相对于document的垂直位置

$(document)scrollTop() 整个文档被上卷的高度

2者差就是$('h2#answers-title')相对于当前浏览器视图窗口的垂直位置

以上就是关于如何在HTML的iframe中，获取被调用的页面的高度，并作为这个iframe的高度全部的内容，包括:如何在HTML的iframe中，获取被调用的页面的高度，并作为这个iframe的高度、vue怎么获取dom元素、微信小程序 view的高度是被内容撑开的 怎么获取它的高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！