在iframe下的页面锚点失效问题

最新推荐文章于 2024-05-30 13:37:08 发布
原创 最新推荐文章于 2024-05-30 13:37:08 发布 · 430 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
欢迎转载，转载请注明原地址，谢谢！
GEO检测
标签
#前端 #javascript
文章讨论了iframe页面中因缺少滚动条导致锚点功能失效的问题，提出通过JavaScript为a标签添加click事件来实现滚动条定位到目标元素的解决方案。

应用场景是：iframe页面没有滚动条，在父窗体中出现滚动条，锚点标记就会失效，因为，锚点是根据当前窗口滚动条滚动窗口的，成为子窗体后没有了滚动条，自然不会滚动，也不会有锚点。

解决办法是：不用锚点，用js为a标签添加click事件，将滚动条定位到目标元素。

用jquery修复在iframe下的页面锚点失效问题
10-25
iframe页面没有滚动条，在父窗体中出现滚动条，锚点标记就会失效，用js判断页面是否被嵌套，用js计算iframe在父窗体位置
在iframe外部给iframe添加锚点
城北荆无命的博客
05-30 1636
锚点的操作是实现类似于word的导航栏的功能的基本思路 当前页面使用锚点的话可以使用 1.html的<a>的方式来实现 设置锚： 1 <a href="#mao" rel="external nofollow" >&nsbp;</a> 设置点：(为了浏览器兼容性，id和name一起设置) 1 ...
前端html小技巧—如何解决iframe页面锚点失效
yunduanaoligei的博客
01-27 1403
今天分享下”前端html小技巧—如何解决iframe页面锚点失效“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 应用场景如下：iframe页面上没有滚动条。如果父窗中出现滚动条，锚点标记将失效，因为锚点将根据当前窗口滚动条滚动窗口。成为子窗后，没有滚动条，自然不会滚动。 解决办法是:用js用j判断页面是否嵌套s计算iframe在父窗体位置，锚点在firame在中间位置，两者结合成父窗滚动。 遇到问题:获取父窗体元素
html:iframe标签以及a标签的锚点和制作书签
YangLu888
10-03 1719
html的iframe标签以及将iframe标签和超链接a标签联系起来制作书签以及a标签的锚点。
关于iframe点击事件无效的解决办法
热门推荐
android_xiaobai1的博客
07-02 1万+
在一次项目的需求下，我偶然发现一个问题，为什么我给iframe添加点击事件无效。 经过度娘的一番解释发现，iframe是没有点击事件的，神奇! var iframe1 = document.querySelector('#iframeID') iframe1.addEventListener('click', function() { a...
iframe 无法触发 clickOutside
qq_44376306的博客
10-18 2895
记录在项目中遇到的一个问题，点击el-dropdown的外部没有将其正常关闭，请教了其他同事，在他提醒下找到了答案：原来跟iframe有关。在一个嵌入 iframe 的页面中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。
在iframe下的页面锚点失效问题，用jquery进行修复
xiaozhen0610的博客
06-13 951
应用场景是：iframe页面没有滚动条，在父窗体中出现滚动条，锚点标记就会失效，因为，锚点是根据当前窗口滚动条滚动窗口的，成为子窗体后没有了滚动条，自然不会滚动。 解决办法是：用js判断页面是否被嵌套，用js计算iframe在父窗体位置，锚点在firame中的位置，两者相加成为父窗体的滚动。 遇到问题：获取父窗体元素（因为有域限制，所有需要在网络环境下方位（即http://domain.com））；父窗体嵌套多个iframe，判断是否是当前iframe页面。 代码： 父窗体页面 index.html &l
微信 html 锚点失效,用jquery进行修复在iframe下的页面锚点失效问题
weixin_29369347的博客
06-04 389
应用场景是：iframe页面没有滚动条，在父窗体中出现滚动条，锚点标记就会失效，因为，锚点是根据当前窗口滚动条滚动窗口的，成为子窗体后没有了滚动条，自然不会滚动。解决办法是：用js判断页面是否被嵌套，用js计算iframe在父窗体位置，锚点在firame中的位置，两者相加成为父窗体的滚动。遇到问题：获取父窗体元素(因为有域限制，所有需要在网络环境下方位(即http://domain.com))；父...
基于iframe的移动端嵌套
aysd68784的博客
12-04 1128
需求描述 上上周接到了新的项目，移动端需要做一个底部有五个导航，点击不同的导航页面主体显示不同的页面，其中两个页面是自己做，而另外三个页面是引用另外三个网址，其中两个网址为内部项目，另外一个为外部（涉及跨域）。 问题 考虑再三后最省时间成本的就是使用iframe，虽然在移动端使用，我的内心是很拒绝的，不过其他方案调研了下都不太符合现状。每点击一次加载一个新的iframe，比较懒，所以两个...
html5 iframe 无法滚动条,iframe嵌入的页面没有滚动条
weixin_31569663的博客
06-10 8283
怎么样iframe没有滚动条 页面有滚动条iframe没有滚动条 scrolling="No"这个去掉了但是页面超过了屏幕，应该有不是到你只什么意思哦frameborder="0" align="top" scrolling="yes" src=""这样可以设置有滚动条BODY { SCROLLBAR-FACE-COLOR:#fdce75; SCROLLBAR-HIGHLIGHT-COLOR: #...
跨域postMessage传值问题
cherrylindan的博客
11-21 583
问题： 在vue项目中嵌套嵌套一个html页面， 其中涉及到嵌套之后的问题有： 页面出现双滚动条， 但是， 去除滚动条之后， html页面中的锚点以及滚动事件全都无效。 首先左侧点击的时候， 页面元素发生变化， 这就需要动态监测页面的高度， 用到的是window中的mutationObserver index.html 代码 var $tar = document.getElementById...
解决iframe刷新子页面但是默认跳转到父页面
qq_42562636的博客
02-29 1971
前言： 用iframe做后台系统框架 这样导航栏就不用每个页面都添加了，但是当在子页面刷新页面的时候 就默认跳到父页面去了 我去 太坑了啊！！！！ 百度了半天 都是什么通过监听锚点是否改变来解决 我试了各种方法都不行 比如这篇文章写的很好 但是我这边就是没用 https://www.cnblogs.com/zhuxiaojie/p/5990262.html 于是想了想 如果用cooike能否解决...
html 锚点兼容火狐,iframe锚点定位在firefox火狐浏览器下失效解决方案
weixin_42442958的博客
06-09 874
iframe锚点定位在firefox火狐浏览器下失效解决方案属于前端实例代码，有关更多实例代码大家可以查看。关于锚点定位大家一定都不会陌生，使用锚点可以实现定位效果。如果确实不了解描点定位的话，可以参阅html利用锚点实现定位代码实例一章节。出现问题的场景如下:A.html是父页面，它里面使用标签引用B.html页面。B.html页面里面有几个定位锚点，点击可以定位到响应的位置，此页面是有垂直滚动...
两个iframe之间实现锚点功能
stormkai的专栏
01-21 4945
1、当一个页面之间实现锚点功能时候可以通过如下方式实现：　　1、《热爱生命》1、《热爱生命》 2、两个页面之间实现锚点功能，可以通过如下方式实现 　　1、《热爱生命》 1、《热爱生命》 3、两个iframe之间实现锚点功能，如果用2所采用的方式则会发生如下情况： 从图片可以看出，当点击导航上的1.《热爱生命》确实跳转到了相应的锚点，不过是把
iframe设置锚点来解决刷新时跳转到其他页面和点击动态生成的菜单栏让其高亮的思路
Eiwen的博客
12-28 1772
我们在使用iframe时，一般是很多子页面共用一个菜单栏，然后点击不同菜单切换到不同的子页面，但是当你刷新时可能会碰到跳转到其他页面的情况，这个时候就需要设置锚点来解决。 另外，我们还需要解决点击菜单栏让它处于高亮的选中状态。并且在设置锚之后，还要处理如何在页面刷新后，让动态生成的菜单仍旧处于被选中的状态。 我们看代码。先设置锚点/设置锚点 function setAnchor(url){
有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题
lianmindiandi
06-22 1223
有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移
vue项目中使用iframe动态设置src地址无效解决方案
dengzihao1023的博客
05-30 1167
今天些项目动态设置了一个iframe的src值，获取值后iframe不更新的解决方案。通过设置一个key值解决了。
iframe弹出窗体丢失焦点的问题
weixin_30362233的博客
10-23 956
好像在不同的浏览器都有这个现象，用javascript弹出一个iframe的窗口，第一次input的焦点是正常的， 然后弹出第二次的时候，选择，按钮都可以获取到，但是input无法获得焦点，而且页面不报任何错误。 以下是摘抄的原因以及解决方法： 问题已解决，不过还是把解决方法说一下，遇到类似bug的可以参考一下 先说一下我弹出层的实现方法，具体代码不贴了，只是说一下流程： sho...
解决 iframe 中的锚点在火狐中无效的问题
zlxzlxzlxzlxzlx的专栏
01-15 3992
最近在一个项目中用到 iframe，其中有些页面带有“锚点（anchor）”，在 IE 下 iframe 里的锚点工作正常，但是在火狐及 Google Chrome 浏览器中却无效··· 于是打开 Google 放狗去搜，搜了半天中文资料均无果··· 就在绝望之际，想想国内的人没有老外那么有奉献精神，于是换成英文的再放狗搜，功夫不负有心人呀，果然在一篇老外的博文中给出了答案··· 在
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值