Jquery 或 js 如何操作主页面下 iframe 里的锚点?

2020-04-13 08:51:04 +08:00
 canadahetian

主页里包含了一个 iframe, JS 代码只能写在主页面里, 是否可以实现通过 主页面的 js 脚本,操作 iframe 里的锚点属性 主页面 点击 跳转到 iframe 下的对应锚点元素 testpoint

请各位前端前辈,指点一下.非常感谢!

2050 次点击
所在节点    问与答
23 条回复
gqbre
2020-04-13 09:02:51 +08:00
首先要同域
albyBen
2020-04-13 09:10:51 +08:00
完成这件事的前提是你能修改 iframe 内的 js 代码,通过 hashchange 或者 postMessage 检测到主页面 js 代码的修改内容,然后在做锚点跳转操作;貌似百度富文本编辑器 ueditor 某个版本可以对 iframe 进行处理,能不能实现需要你自己去探索了
canadahetian
2020-04-13 09:32:59 +08:00
@gqbre 绝对同域 在同一个服务器的,同一个项目文件夹,
主 html 路径 /项目 /static/index.html
iframe 包含的 html 路径 /项目 /static/html/1.html
请指点一下,拜托了,感谢
cydian
2020-04-13 09:35:49 +08:00
父对子 只要同域什么都能做啊
rabbbit
2020-04-13 09:36:31 +08:00
document.querySelector("iframe").contentWindow
canadahetian
2020-04-13 09:57:39 +08:00
var x_text = "test1";
document.querySelector("iframe").contentWindow.animate({scrollTop: $("a[name="+x_text+"]").offset().top}, 500);
@cydian
@rabbbit
报错:
Uncaught TypeError: document.querySelector(...).contentWindow.animate is not a function
不能直接这么用吗?
CodingMonkey
2020-04-13 10:01:55 +08:00
@canadahetian document.querySelector("iframe").contentWindow 拿到的是 window,哪来的 animate() 方法?
canadahetian
2020-04-13 10:21:26 +08:00
@CodingMonkey
document.querySelector("iframe").contentWindow.document.body.animate({scrollTop: $("a[name="+x_text+"]").offset()}, 500)
@rabbbit

这样写,也没有滚动到锚点位置,请指点一下.
cydian
2020-04-13 10:24:55 +08:00
直接对子操作啊。
你对父操作干啥?
canadahetian
2020-04-13 10:35:08 +08:00
@cydian 怎么操作啊大神,指点一下,我前端 Noober
hshpy
2020-04-13 10:38:26 +08:00
试试改 src 属性的 url
cydian
2020-04-13 10:39:04 +08:00
@canadahetian #10 你的描述不够清晰
子窗口有没有锚点
你是想要插入锚点然后跳转
还是创建 iframe 的时候自动划到锚点
还是什么?
fengbjhqs
2020-04-13 11:06:12 +08:00
有个不成熟的想法,如果子 iframe 是服务器端渲染,可以获取到文本修改后转 blob,在放到 iframe 里
canadahetian
2020-04-13 11:11:23 +08:00
通过主页面的按钮,点击后, 滚动到 iframe 子页面 <a name="docker-架构" class="md-header-anchor"></a>这个位置

现在不报错了,但是没有滚动

拜托了,大神,就查这一个功能了.

主页面 index.html 代码如下
<html>
...
<iframe src="test1.html" width="100%" frameborder="0" scrolling="no" id="external-frame" name="external-frame"
onload="setIframeHeight(this)"></iframe>
...

/* 点击这个按钮, 跳转到锚点 docker-架构 的位置*/
<button onclick="bookmark_button_click(this)">docker-架构</button>




<script>
function bookmark_button_click(self){
var x_text = self.innerText // 值是:docker-架构
document.querySelector("iframe").contentDocument.documentElement.querySelector("a[name="+x_text+"]")
}
<script>

<html>


test1.html 代码如下:
<html>
<body>
....
<h3><a name="centos7" class="md-header-anchor"></a><span>Centos7</span></h3>
...
<h2><a name="container 容器相关命令" class="md-header-anchor"></a><span>Container 容器相关命令</span></h2>
...
<h2><a name="docker-架构" class="md-header-anchor"></a><span>Docker 架构</span></h2>
...
</body>
<html>



@cydian
cydian
2020-04-13 12:21:46 +08:00
var v2 = document.getElementById('id').contentWindow;
var v22 = v2.document;
v22.scroll(500,500);
元素的位置自己另写代码定位吧。
canadahetian
2020-04-13 20:48:03 +08:00
@cydian 大哥你是谁别百度个代码的吗?你看一下我给你回复的代码?你写的这些,我不是已经写了吗,来电 Stackflow 精神呗
cydian
2020-04-13 21:27:42 +08:00
@canadahetian 所以你到底是没明白怎么控制 iframe 还是获取元素位置?
我或许没有理解你的需求。
抱歉打扰了。
你的代码我是认真看了,你想实现的功能,我也回复了。
cydian
2020-04-13 21:29:07 +08:00
@canadahetian 还有,你是歧视百度出来的代码吗?
这么厉害怎么到现在都还没有解决?
解决问题的代码就是好代码,你管他从哪里来的,合法合规合情合理。
对你的回复无语。
canadahetian
2020-04-13 22:49:54 +08:00
@cydian 不是哥们,你的代码运行,可不行啊,而且我之前不是回复你了吗?
这个代码已经在之前就测试了,没法定位到 iframe 的 a 元素位置,页面文斯不懂啊.
canadahetian
2020-04-13 22:58:49 +08:00
@cydian
var iframe_windows = document.getElementById("external-frame").contentWindow;
var iframe_document = iframe_windows.document;
iframe_document.scroll(500,500);

直接报错.
Uncaught TypeError: iframe_document.scroll is not a function

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/661808

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX