首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法访问Iframe中div的高度

是由于同源策略的限制导致的。同源策略是浏览器的一种安全机制,它限制了来自不同源的文档或脚本之间的交互。在同源策略下,Iframe中的内容与包含它的页面必须具有相同的协议、域名和端口。

由于同源策略的限制,无法直接从包含Iframe的页面中访问Iframe中div的高度。但是可以通过一些间接的方式来获取Iframe中div的高度。

一种常见的方式是在Iframe中的页面中使用JavaScript将div的高度传递给包含它的页面。可以通过在Iframe中的页面中编写以下代码来实现:

代码语言:txt
复制
// 在Iframe中的页面中获取div的高度
var divHeight = document.getElementById('yourDivId').offsetHeight;

// 将div的高度传递给包含它的页面
parent.postMessage(divHeight, '*');

在包含Iframe的页面中,可以监听message事件来接收来自Iframe中页面的消息,并获取div的高度。可以通过以下代码实现:

代码语言:txt
复制
// 监听message事件
window.addEventListener('message', function(event) {
  // 判断消息来源是否是Iframe中的页面
  if (event.source === iframe.contentWindow) {
    // 获取div的高度
    var divHeight = event.data;
    // 在包含Iframe的页面中进行相应处理
    // ...
  }
});

这种方式可以通过JavaScript的postMessage方法实现跨域通信,从而间接获取Iframe中div的高度。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 腾讯云云原生容器服务(TKE):https://cloud.tencent.com/product/tke
  • 腾讯云对象存储(COS):https://cloud.tencent.com/product/cos
  • 腾讯云人工智能(AI):https://cloud.tencent.com/product/ai
  • 腾讯云物联网(IoT):https://cloud.tencent.com/product/iot
  • 腾讯云移动开发(Mobile):https://cloud.tencent.com/product/mobile
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iframe的高度自适应_div自适应高度

如果iframe始终调用同一个固定高度的页面,我们直接写死iframe高度就可以了。...方法二,在主页面iframe的onload事件中执行JS,去取得被包含页的高度内容,然后去同步高度。...如果你演示Demo后,会发现,除了IE,其他浏览器中,当层展开后再隐藏,取到的高度值还是维持在展开的高度303,而非隐藏回去的真正值184,就是说长高了之后缩不回去了。...可以归纳为,当iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。...这个值,在实际应用中决定,足够矮但又不能太矮,否则在FF等浏览器里会有很明显的闪烁。DOM操作的时候主页面无法监听到,只能DOM操作完了之后把高度变小了。

7.1K40
  • 让动态的 iframe 内容高度自适应

    使用iframe加载其他页面的时候,需要自适应iframe的高度 这里加载了两个不同内容高度的页面至iframe中 1....没有设置高度   div class="iframe-wrapper"> iframe name="iframe1" src="iframe1.html" frameborder...在onload事件触发时,根据body的高度自适应iframe的高度 div class="iframe-wrapper"> iframe name="iframe1...可以发现,高度虽然能自适应,不过只支持高度了“从小到大”的自适应 如iframe2的内容比iframe1的高,后者动态加载出前者能自适应,但前者动态加载出后者就不行了,这种高度减小不了 最后的解决办法是...在onload事件中动态设置高度为body高度之前,先将原高度还原为auto或空值 可以用setTimeout(fn,0)将高度设置放到下一轮事件循环中执行,或者在 onbeforeunload 事件中先把高度设置为

    6.8K51

    div高度设置100%无效的问题

    今天遇到一个问题,给div设置高度 height: 100%;却没有生效,在f12审查元素的时候可以看到高度字占据了半屏,并没有占据100%全屏,也就是说,div高度设置100%无效。 ?...记录一下解决办法: 找到div的父级元素,并且给父级元素手动设置一个高度,这个问题就解决了。...错误原因,根本在于没有浏览器是计算元素高度和宽度的原理: Web浏览器在计算有效宽度时会自动将页面内容平铺填满整个横向宽度。...但是浏览器根本就不计算内容的高度, 当一个元素的高度设定为百分比高度时, 无法根据获取父元素的高度,也就无法计算自己的高度。...原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

    5.2K20

    iframe 自适应高度的多种实现方式

    大家好,又见面了,我是你们的朋友全栈君。 iframe高度自适应内容 需求:实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。...二、多个iframe的情况下 //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔....自适应高度 跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。...我们使用www.a.com下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。...= hash_width; b_iframe.style.height = hash_height; } agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度

    7.5K30

    关于Div的宽度与高度的100%设定

    正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度(高度)到底有多宽有多高?...这个100%是从哪里得到的从哪里继承的?今天我们的话题就是有关div高度100%的问题!...div的100%是从其上一级div的宽高继承来的,有一点很关键,就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。...举例说明:父div(deman)宽300高200,子div(cc)如果在这个条件下设置divcc的宽高都为100%的话,那cc的确切大小就是父div的大小(宽300高200),在尝试中你会发现,div显示会受自身和其上一级...你设div的高度为100%,那么它是和什么地方相对为100%? 前面总得有个容器说明他的高度是多少。这样的话div才能按比例100%继承上一级的高度。

    3.9K20

    不使用定时器实现iframe的自适应高度

    … 把调整iframe高度的方法暴露给第三方开发者,显示不大合适。...自适应高度的问题,比较理想的办法是: iframe的onload前使用定时器修改iframe的高度,在onload后清除定时器,然后监听iframe它的document的DOMSubtreeModified...注明:文章的标题是不使用定时器,而上面我提到定时器,主要是担心iframe的domready与onload的那段时间内,iframe的高度看上去会很怪异(实际开发中这一段时间有多长,影响有多大,到底要不要加定时器...,还是需要根据实际情况再衡量一下) 下面的实现,我没有考虑使用定时器(如果加上了就不符合文章的标题了,而在实际开发中可能还是需要,视情况而定了),关于使用定时器使iframe自适应高度,可以参考口碑的那篇文章...:再谈iframe自适应高度>> 还有一点要提一下:chrome的某些版本中,子页(iframe)调用parent时会被禁止,而导致页面没有效果,放在web上跑就好了。

    2.2K20

    如何实现iframe(嵌入式帧)的自适应高度

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数...不敢独享,大家要是觉得有用,欢迎使用 源代码如下  //** iframe自动适应页面 **//  //输入你希望根据页面高度自动调整高度的...iframe的名称的列表  //用逗号把每个iframe的ID分隔....//定义iframe的ID  var iframeids=["test"]  //如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏  var iframehide...iframe的浏览器的显示问题    if ((document.all || document.getElementById) && iframehide=="no")    {     var

    1.2K20

    js获取iframe中的内容(iframe内嵌页面)

    大家好,又见面了,我是你们的朋友全栈君。 js 如何获取包含自己iframe 属性 a.html 如何在b.html里获取包含他的iframe的id 在父页面中定义函数,再到子页面中调用。...iframe for(i=0;i js怎样获取iframe,src中的参数 如何获取iframe里的src里面的属性 js如何修改iframe 中元素的属性 iframe 属性 及用法越详细越好 。。...在线等 iframe元素的功能是在一个html内嵌一个文档,创建一个浮动的郑iframe可以嵌在网页中的任意部分 name:内嵌帧名称 width:内嵌帧宽度(可用像素值或百分比) height:内嵌帧高度...(可用像素值或百分比) frameborder:内嵌帧边框 marginwidth:帧内文 jQuery怎么给iframe的src赋值 给iframe src赋值,代码如下: 特别注意: 1.上述jquery...JavaScript如何修改页面中iframe的属性值 HTML5有客户端数据储存的方法,但是支持的浏览器不多。

    24.7K50

    CSS一个div内两个子元素的高度自适应

    ---- 设想这样一个情况:一个父元素有两个子元素,父元素的高度不确定,用子元素撑起来。 但是这会导致一个问题:各个子元素的高度不一致,为子元素添加height:100%是无效的。...这种方式需要父元素高度确定,然而父元素的高度由子元素确定。 猜想渲染时由于父元素高度不确定,会计算出各个子元素的高度再确定父元素高度,但计算子元素高度时并没有父元素高度可以参考,因此上述方法行不通。...你可以 为父元素设置固定高度 配合height:100%,两个子元素都能撑满父元素 利用span元素与布局 如果span的定位是absolute类型,那么它的高度可以等于父元素的高度。...父元素只根据相对定位的子元素决定高度,也就是说,absolute定位的span设置height:100%是有效的,父元素的高度对它来说是已知的。...这种方法下,父元素的高度仍然由最高的相对定位的子元素确定,其它元素放到span中,所以需要知道最高的子元素。 使用同色背景 虽然很简单,却很实用的方法。子元素的高度虽然不都是100%,但效果一样。

    5.1K30

    伪元素的作用_获取iframe中的元素

    大家好,又见面了,我是你们的朋友全栈君。...目标网站红薯中文网 获取网页源代码也获取不了这些动态渲染的数据 所以用简单的,但是有点麻烦的方法 使用selenium执行js,或者直接在浏览器里面执行js function kkk(){...} kkk() 另外,还有大部分的数据是加密的,也很简单 function long2str(v, w) { var vl = v.length; var sl = v[vl - 1] & 0xffffffff...76980100是上一个请求获取的解密密钥 套用即可 解密之后,里面的参数是对应的 context_kw11 这个就是对应的伪元素的class,将这个都拿去用selenium执行js的方法获取到结果...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    7K30
    领券