iframe和父页面共用一个滚动条

最新推荐文章于 2021-10-21 16:14:25 发布
最新推荐文章于 2021-10-21 16:14:25 发布
阅读量3.4k 收藏 1
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky_xin/article/details/84697138
版权

子页面：

<body οnlοad="parent.document.all.iframe.style.height=document.body.scrollHeight;" topmargin="0" leftmargin="0" rightmargin="0" bottomMargin="0">

 父页面：

<iframe name="iframe" id="iframe" width="100%"  scrolling="no" frameborder="0" src="csyyfxbgReport.do?method=reportFjjstj&reportName=<c:out value='${reportName}'/>&beginDate=<c:out value='${queryBean.beginDate}'/>&endDate=<c:out value='${queryBean.endDate}'/>&countyId=<c:out value='${queryBean.countyId}'/>&streetId=<c:out value='${queryBean.streetId}'/><c:if test="${flag==5}">&shopno=<c:out value='${queryBean.shopno}'/></c:if>&flag=<c:out value='${flag}'/>" ></iframe>

 

sky_xin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
frame页面双滚动条问题
04-21
NULL 博文链接：https://fengbin2005.iteye.com/blog/1911553
JavaScript中关于iframe滚动条的去除和保留
11-27
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？  一：去掉全部的滚动条  第一个方法： ...
如何让iframe框架和主页面共用一个滚动条(也称为：iframe高度自适应问题)
weixin_30873847的博客
08-09 1198
最近在前端页面遇到了一个问题，我在一个页面中利用iframe框架引入了一个页面进来，但是这个页面的高度是不叫高的，高出电脑屏幕很多， 所以就引发了iframe框架一个滚动条，然后主页面一个滚动条，这样页面就出现了两个滚动条。在网上查了好久，一直没有好的方法，直到我在 网上看到了iframe高度自适应，才解决了这个问题。 自适应的意思是，iframe框架的高度自动适应引入的HTML文...
让父页面的<iframe 中的页面，即子页面左右、上下有滚动条
iteye_16591的博客
03-19 360
一、在父JSP页面中的代码： [code="xhtml"] [/code] 二、在子页面中的代码： [code="javascript"] //让父页面的
iframe实现父子内容
心若向阳 无谓悲伤
06-07 539
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 利用iframe标签实现父子页面的嵌套一、需求及场景二、了解iframe三、代码实现1.后台代码2.前台代码3.实现效果![在这里插入图片描述](https://img-blog.csdnimg.cn/20210607113209498.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L
父页面调用子页面数据传参，子页面为外部页面内嵌到父页面的iframe中，浏览器滚动条样式自定义
Hzq88888的博客
08-27 130
子页面： var message = {text:"textdata",filePath:'888888'} window.parent.postMessage(message, '*'); 父页面： window.addEventListener('message', function (e) { let data = e.data; console.log(data); if (true){ .
iframe调用父页面函数示例详解
09-04
本文将详细讲解如何在`iframe`中调用父页面的函数，并通过一个具体的示例来阐述这一过程。 首先，我们需要理解`iframe`和父页面的关系。`iframe`是一个独立的浏览上下文，它可以被嵌入到父页面的任何位置。尽管`...
JS去除iframe滚动条的方法
10-24
主要介绍了JS去除iframe滚动条的方法,涉及javascript操作iframe中属性的技巧,非常具有实用价值,需要的朋友可以参考下
demo_DEMO_子页面刷新父页面iframe_
09-30
标题“demo_DEMO_子页面刷新父页面iframe_”暗示我们关注的焦点是关于如何在子页面中触发父页面的刷新操作，特别是在一个IFrame上下文中。下面将详细探讨这个主题。 首先，我们需要了解IFrame（内联框架）的基本...
iframe子父页面调用js函数示例
10-26
如果要在子页面中调用父页面的一个名为`a()`的函数，可以这样写： ```javascript window.parent.a(); ``` 如果需要获取父页面中某个ID为"test"的元素的值，可以使用以下代码： ```javascript window.parent...
iframe子元素相对于父页面滚动条固定(iframe无滚动条，iframe固定高度有滚动条，两种情况)...
weixin_30451709的博客
04-28 591
一、当iframe自适应高度，无滚动条时候： 例如这样： //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { var scrollheight = parseInt($(parent.window).scrollTop()); console.log(parseInt($(pare...
将iframe的内容高度赋值给iframe本身高度，并隐藏iframe里面的垂直滚动条，使iframe和父页面看成是一个整体页面
u011511086的专栏
10-21 338
将iframe的内容高度赋值给iframe本身高度，并隐藏iframe里面的垂直滚动条，使iframe和父页面看成是一个整体页面 核心计算iframe的js代码 var ifr = document.getElementById('stageFrame'); //计算iframe高度 function calcHeight() { ifr.style.height = '700px'; //获取iframe里面的内容高度 var iDoc = ifr.contentDoc
iframe子页面控制父页面滚动高度，直接蹦到父页面开头
weixin_30924087的博客
12-14 224
zepto调用父页面窗口元素的scrollTop()方法会报错，貌似是scrollTop函数中有个scrollTo()方法用到this，指向错误。 经检查， 　　原生js控制父页面滚动，只能写数字，不能带单位，否则不认识，设置为0： 　　window.top.document.documentElement.scrollTop = "100"; 　　window.top.docu...
利用iframe嵌入页面，实现父子页面交互
行云
09-30 2037
待写
父页面使用iframe嵌子页面时使子页面弹框适应父页面滚动像素
qq_34420739的博客
03-11 466
使用el-dialog的top属性 当滚动条拖动过iframe之前的区域高度时，dialog的top值设置为滚动条像素值-区域高度的值 x=父页面高度=parent.document.body.offsetHeight y=滚动条像素高度=parent.window.pageYOffset b=子页面高度=document.body.offsetHeight=(这里等于1108) a=A区域高度=x-b 即dialog的top属性设置为：(y-a+80>0)?(y-a+80):80 （感觉设置80更
多个iframe自适应高度共用一个滚动条
zyy_jay的专栏
09-10 272
我在一个页面中有两个iframe，这两个是并列的，一个在左边显示person的数据，一个在右边显示cell的数据，如果被引用的页面数据太大，就会被截掉，但是设置scrolling=“auto”的话，双会出现两个滚动条。在网上查了一下代码，大概有两种方式可以实现 方法一.被引用的页面是静态的高度 js代码 [code="java"] //获取被包含的页面的静态高度，来设置ifram...
Vue集成Iframe页面
qq_35149546的博客
10-19 664
1.Vue集成Iframe页面
html iframe随页面滚动,使用iframe window的scroll方法控制iframe页面滚动
weixin_42393362的博客
06-04 933
在页面中如何控制内嵌的iframe滚动呢？方法是使用iframe window的scroll方法：1、获取iframe的窗口对象var iwin = document.getElementById('iframe1').contentWindow;2 、获取iframe的窗口document对象var doc = iwin.document;3、调用iframe window对象的scroll方法...
解决多个iframe嵌套而造成的多个滚动条问题
w36680130的博客
06-13 613
解决多个iframe嵌套而造成的多个滚动条问题
iframe和父页面是两个项目 修改iframe中的代码如何让父页面更新
最新发布
05-23
如果iframe和父页面是两个不同的项目，那么在iframe中修改代码不会直接影响到父页面。但可以通过以下方法让父页面更新： 1. 使用postMessage通信机制：在iframe中修改完代码后，通过postMessage方法向父页面发送消息，父页面接收到消息后重新加载iframe即可更新代码。 2. 使用Ajax技术：在iframe中修改完代码后，通过Ajax技术向服务器请求最新的代码，然后将新代码替换原来的代码。这种方法需要服务器端支持，并且需要考虑缓存问题。 3. 使用WebSocket通信机制：在iframe中修改完代码后，通过WebSocket与父页面建立连接，将新代码发送给父页面，父页面接收到新代码后重新加载iframe即可更新代码。 需要注意的是，以上三种方法都需要在父页面和iframe中分别编写相应的代码来实现通信。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值