父页面操作iframe中子页面的锚点

最新推荐文章于 2022-11-22 14:34:50 发布
最新推荐文章于 2022-11-22 14:34:50 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 前端 文章标签： iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mchange/article/details/7942181
版权

 父页面： a.html

<body>
<a href="xibei.html#a" target="iframe1">a</a>
<a href="xibei.html#b" target="iframe1">b</a>

<iframe src="xibei.html" frameborder="1" marginheight="0px" marginwidth="0px" name="iframe1" scrolling="no" id="xibei" active="true"></iframe>
</body>


子页面：xibei.html

<body>
<a name="a">AAAAAAAAAAAAAAAAAAAAAAAAAAA</a>
a<br/>
a<br/>
<input type="text" value="123" id="test">
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
a<br/>
<a name="b">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</a>
a<br/>
a<br/>
a<br/>
</body>

Mchange
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iframe中子页面调用父页面的js方法
qq_15884363的博客
01-18 7732
app.html    http://www.w3.org/1999/xhtml">无标题文档      function val(){        alert('frame子窗体调用父窗体方法');     }         js remote  index.htmlhttp://www.w3.org/1999/xhtml">无标题文档 服务器分部积分附件包括发酵白金卡哇          
实现iframe父子页面传值
yans121的博客
10-13 367
父页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>parent</title> </head> <body style="ove.
iframe 父窗口和子窗口相互的调用方法集锦
turnRound
09-18 168
一、父窗口调用iframe子窗口方法 1、HTML语法：&lt;iframe name="myFrame" src="child.html"&gt;&lt;/iframe&gt; 2、父窗口调用子窗口：myFrame.window.functionName(); 3、子窗品调用父窗口：parent.functionName(); 简单地说,也就是在子窗口中调用的变量或函数前加个paren...
如何在iframe上定位鼠标位置
xaluke的专栏
03-19 3561
<br /> <br />在页面中，如果嵌入了iframe框，mousemove事件在这个区域是不会激发的。必须使用iframe里能取到的位置信息进行定位。而iframe里如果是嵌入页面的相对位置，则没有用。和父页面关联起来的是screeX/Y。在iframe和父页面取到的值是相同的.因此可以使用这个参数，计算和pageX/Y的差值，就可以计算出当前鼠标所在的位置了。<br /> <br />代码如下：<br /> <br />var mouseX = 0; 鼠标位置X<br />var mouseY =
在iframe外部给iframe添加锚点
城北荆无命的博客
05-30 1417
锚点的操作是实现类似于word的导航栏的功能的基本思路 当前页面使用锚点的话可以使用 1.html的<a>的方式来实现 设置锚： 1 <a href="#mao" rel="external nofollow" >&nsbp;</a> 设置点：(为了浏览器兼容性，id和name一起设置) 1 ...
html:iframe标签以及a标签的锚点和制作书签
YangLu888
10-03 1357
html的iframe标签以及将iframe标签和超链接a标签联系起来制作书签以及a标签的锚点。
js jquery IFrame父子页面处理 以及锚点 理解
wangzhantao的专栏
08-07 525
parent.frames["frameName"].window.functionName(); frameName:IFrame的ID; funtionName:子页面中JS方法名; var obj = parent.frames["frameName"].window; 在父页面访问子页面中某个控件如:obj.document.getElementById('clientID...
用jquery修复在iframe下的页面锚点失效问题
10-25
iframe页面没有滚动条，在父窗体中出现滚动条，锚点标记就会失效，用js判断页面是否被嵌套，用js计算iframe在父窗体位置
vue添加锚点,实现滚动页面时锚点添加相应的class操作
10-14
在Vue中实现页面滚动时锚点添加相应class的操作，通常是为了增强用户体验，使得用户能够清晰地看到当前浏览的位置。以下将详细讲解实现这一功能的步骤和相关知识点。 首先，我们需要在HTML模板中设置锚点。在提供的...
用jquery进行修复在iframe下的页面锚点失效问题
09-28
然而，当`iframe`页面没有滚动条，而父窗体有滚动条时，页面内的锚点定位会出现问题。这是因为浏览器默认会根据当前窗口（即`iframe`）的滚动条来定位锚点，但`iframe`没有滚动条，导致锚点无法正常工作。 为了解决...
jQuery实现平滑滚动页面到指定锚点链接的方法
10-23
总结起来，jQuery实现平滑滚动页面到指定锚点链接的关键在于利用事件处理（`click`事件）、DOM操作（获取`href`属性）以及第三方插件提供的平滑滚动方法。这种方法能够提升用户体验，使页面导航更加流畅。同时，...
iframe通过锚点控制父页面的位置
caiceclb的专栏
06-12 302
比较鸡肋的东东，不过还是碰见了，记下来 iframe通过锚点控制父页面的位置,答案就是在iframe中的子页面中加上代码(top是父级页面的锚点名称)：     &lt;body onload="parent.location.hash='top'"&gt;     来源于：http://www.lslnet.com/linux/dosc1/48/linux-327672.h...
解决iframe下页面锚点链接跳转当前页面组件后页面父布局错乱问题
hexianfan的博客
11-22 275
解决iframe下页面锚点链接跳转当前页面组件后页面父布局错乱问题
两个iframe之间实现锚点功能
stormkai的专栏
01-21 4783
1、当一个页面之间实现锚点功能时候可以通过如下方式实现：　　1、《热爱生命》1、《热爱生命》 2、两个页面之间实现锚点功能，可以通过如下方式实现 　　1、《热爱生命》 1、《热爱生命》 3、两个iframe之间实现锚点功能，如果用2所采用的方式则会发生如下情况： 从图片可以看出，当点击导航上的1.《热爱生命》确实跳转到了相应的锚点，不过是把
有关iframe锚点,锚点出现上下偏移,锚点出现页面显示问题.iframe的srcdoc问题
lianmindiandi
06-22 916
有关iframe的srcdoc问题,iframe锚点定位,iframe锚点上下偏移
iframe 父页面a标签链接跳转子页面锚点方法
NotBad_的博客
11-22 2966
方法写在子页面上： ParentBody.find("a").each(function () { var link = $(this); //获取当前元素的href属性值 并保存在变量href中 var href = link.attr("href"); //如果有属性值并且属性值的第一个字符是# if (href && href[0
vue3 锚点页面跳转
最新发布
03-26
Vue3中，可以使用`vue-router`实现锚点页面跳转。具体步骤如下： 1. 在路由配置中添加`props: true`，以便在组件中获取动态路由参数。 ```js const routes = [ { path: '/page/:anchor', name: 'Page', component: Page, props: true // 添加 props: true } ] ``` 2. 在组件中获取参数，并使用`$nextTick`使页面渲染完成后再跳转到锚点位置。 ```html <template> <div> <h1>Page</h1> <<div ref="anchor1">Anchor 1</div> <<div ref="anchor2">Anchor 2</div> </div> </template> <script> export default { props: ['anchor'], mounted() { this.$nextTick(() => { // 根据锚点参数跳转到对应的锚点位置 if (this.anchor === 'anchor1') { this.$refs.anchor1.scrollIntoView() } else if (this.anchor === 'anchor2') { this.$refs.anchor2.scrollIntoView() } }) } } </script> ``` 3. 在页面中添加锚点链接，链接地址为动态路由地址。 ```html <template> <div> <h2>Jump to:</h2> <ul> <li><router-link :to="{ name: 'Page', params: { anchor: 'anchor1' } }">Anchor 1</router-link></li> <li><router-link :to="{ name: 'Page', params: { anchor: 'anchor2' } }">Anchor 2</router-link></li> </ul> </div> </template> ``` 这样，当用户点击锚点链接时，会跳转到对应的页面，并滚动到对应的锚点位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值