iframe子页面控制父页面滚动条高度

最新推荐文章于 2020-07-29 20:49:37 发布
最新推荐文章于 2020-07-29 20:49:37 发布
阅读量792 收藏
点赞数
文章标签： javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_23582331/article/details/107519133
版权

window.top.document.documentElement.scrollTop = "0";
window.top.document.body.scrollTop = "0";

Challenger是十三哦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Iframe 自动适应页面的高度示例代码
09-04
然而，一个常见的问题是Iframe的内容高度可能超过其初始设定的高度，导致滚动条出现，影响用户体验。因此，我们需要让Iframe能够自动适应其内部页面的高度。 在给定的示例代码中，我们看到一个JavaScript函数`...
layer弹出层 iframe层去掉滚动条的实例代码
10-18
在这个问题中，我们关注的是如何在layer弹出层中的iframe层去除滚动条，以保持页面的整洁和用户体验。 首先，让我们深入理解一下涉及到的几个概念： 1. **layer**：Layer是基于jQuery的一个轻量级的弹窗插件，提供...
iframe子元素相对于父页面滚动条固定(iframe无滚动条，iframe固定高度有滚动条，两种情况)...
weixin_30451709的博客
04-28 587
一、当iframe自适应高度，无滚动条时候： 例如这样： //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部 $(parent.window).scroll(function() { var scrollheight = parseInt($(parent.window).scrollTop()); console.log(parseInt($(pare...
使用Iframe标签嵌套的页面滚动条
weixin_44548473的博客
07-18 4307
开发工具与关键技术： Vs 、使用Iframe标签嵌套的页面滚动条 作者：木有窝的鸟~小通 撰写时间：2019年7月17日 见过滚动条的小窗口吗，出现滚动条可以根据屏幕的大小来设置。一般iframe标签可以用于页面嵌套。平时写的小窗口也可以用iframe标签来写。那么在页面嵌套中呢，它可以设置宽度，而设置比较小的宽度的时候页面超出部分会出现滚动条。正因为如此，其实运用也比较广泛。 1、 为了节省视...
iframe子页面控制父页面滚动高度，直接蹦到父页面开头
weixin_30924087的博客
12-14 215
zepto调用父页面窗口元素的scrollTop()方法会报错，貌似是scrollTop函数中有个scrollTo()方法用到this，指向错误。 经检查， 　　原生js控制父页面滚动，只能写数字，不能带单位，否则不认识，设置为0： 　　window.top.document.documentElement.scrollTop = "100"; 　　window.top.docu...
iframe和父页面共用一个滚动条
sky_xin的专栏
01-20 3395
子页面： <body onload="parent.document.all.iframe.style.height=document.body.scrollHeight;" topmargin="0" leftmargin="0" rightmargin="0" bottomMargin="0">  父页面： <iframe name="ifram
iframe高度自适应及隐藏滚动条的实例详解
01-21
但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。 高度自适应 <iframe src=...
iframe根据页面内容自适应高度和宽度
09-03
然而，由于`iframe`的大小固定，当嵌入的页面内容高度或宽度超过`iframe`设定的尺寸时，可能会出现滚动条或者内容被截断的情况。为了解决这个问题，我们需要让`iframe`根据其内容自动调整高度和宽度。本篇文章将详细...
使用iframe window的scroll方法控制iframe页面滚动
09-04
在页面中如何控制内嵌的iframe滚动呢？方法是使用iframe window的scroll方法，大家可以参考下面的示例
iframe自适应父页面的大小，而没有滚动条，scrolling="no"后无法正常显示内容的问题
热门推荐
m0_38138387的博客
03-30 2万+
今天做网站遇到了一个问题，iframe的scrolling="no"设置后，无法显示全部iframe内容，判断是内容隐藏了，一顿好找，在网上找到了这编文章，问题解决转】让iframe自适应大小，没有滚动条 (2011-05-26 09:01:00)转载▼标签： 杂谈 父页里有一个层&lt;div&gt;，&lt;div&gt;里有一个子框架&lt;iframe&gt;,&lt;iframe&gt;...
iframe子页面控制父页面滚动高度
菜言堂的博客
07-29 485
iframe子页面控制父页面滚动高度 代码：$(document).ready(function() { window.top.document.documentElement.scrollTop = "0"; window.top.document.body.scrollTop = "0"; })
关于iframe中获取父级元素的滚动条（scrollTop）的值
weixin_34294649的博客
07-24 1028
因为临时要重构老项目，将jsp文件写成html文件，于是就发现了有蛮多的bug。 首先，因为jsp中有include方法，但是html中没有，所以只能暂时用iframe来代替，但是iframe的坑也有很多，今天遇到一个关于滚动条的问题，即点击下一页接受数据后自动滚到顶部，自己查了很多资料说用。 var scroll_top =window.parent.document.documentEle...
iframe根据自身高度控制父页面滚动条长度
Alex的博客
10-09 1367
$("#myframe").load(function () {    var mainheight = $(this).contents().find("body").height() + 30;    $(this).height(mainheight); });
Jquery 操作子页面滚动禁止父页面跟着滚动
12-17 2531
一、实现方式：jQuery 事件 - preventDefault() 方法； 二、使用实例： $("a").click(function(event){ event.preventDefault(); }); 三、参照实例网址：https://www.zhangxinxu.com/study/201512/inner-scroll-prevent-parent-scroll.html...
iframe相关:滚动条及高度显示
最新发布
08-17
iframe是HTML中的一个标签，用于将另一个网页或文档嵌入到当前页面中。在使用iframe时，可能会遇到滚动条和高度显示的问题。 1. 滚动条：当嵌入的网页或文档的内容超出了iframe的显示范围时，会显示滚动条以便用户能够浏览全部内容。要控制是否显示滚动条，可以使用iframe的属性"scrolling"。当设置"scrolling"为"yes"时，会显示滚动条；设置为"no"时，不显示滚动条。 例如： <iframe src="example.html" width="500" height="300" scrolling="yes"></iframe> 上述代码会显示一个宽度为500px，高度为300px的iframe，并显示滚动条以浏览嵌入的example.html页面的全部内容。 2. 高度显示：iframe的高度可以使用"height"属性来控制。可以设置固定的像素值，也可以根据嵌入的网页或文档的内容来自动适应高度。 如果希望根据内容自动适应高度，可以使用JavaScript来实现动态调整iframe的高度。通过检测嵌入的网页或文档的内容高度，然后将该高度动态赋值给iframe的高度属性。 例如： <script> function adjustIframeHeight() { var iframe = document.getElementById("myIframe"); var iframeBody = iframe.contentDocument.body; iframe.style.height = iframeBody.scrollHeight + "px"; } </script> <iframe id="myIframe" src="example.html" width="500" onload="adjustIframeHeight();"></iframe> 上述代码会在页面加载完成后，通过JavaScript动态调整iframe的高度，使其根据嵌入的example.html内容自动适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值