主页里包含了一个 iframe, JS 代码只能写在主页面里, 是否可以实现通过 主页面的 js 脚本,操作 iframe 里的锚点属性 主页面 点击 跳转到 iframe 下的对应锚点元素 testpoint
请各位前端前辈,指点一下.非常感谢!
This topic created in 2245 days ago, the information mentioned may be changed or developed.
 |
1
gqbre Apr 13, 2020
首先要同域
|
 |
2
albyBen Apr 13, 2020
完成这件事的前提是你能修改 iframe 内的 js 代码，通过 hashchange 或者 postMessage 检测到主页面 js 代码的修改内容,然后在做锚点跳转操作；貌似百度富文本编辑器 ueditor 某个版本可以对 iframe 进行处理，能不能实现需要你自己去探索了
|
 |
3
canadahetian OP @gqbre 绝对同域 在同一个服务器的,同一个项目文件夹,
主 html 路径 /项目 /static/index.html iframe 包含的 html 路径 /项目 /static/html/1.html 请指点一下,拜托了,感谢 |
 |
4
cydian Apr 13, 2020 via Android
父对子 只要同域什么都能做啊
|
 |
5
rabbbit Apr 13, 2020  1
document.querySelector("iframe").contentWindow
|
|
6
canadahetian OP |
 |
7
CodingMonkey Apr 13, 2020
@canadahetian document.querySelector("iframe").contentWindow 拿到的是 window，哪来的 animate() 方法？
|
|
8
canadahetian OP @CodingMonkey
document.querySelector("iframe").contentWindow.document.body.animate({scrollTop: $("a[name="+x_text+"]").offset()}, 500) @rabbbit 这样写,也没有滚动到锚点位置,请指点一下. |
|
9
cydian Apr 13, 2020 via Android
直接对子操作啊。
你对父操作干啥？ |
|
10
canadahetian OP @cydian 怎么操作啊大神,指点一下,我前端 Noober
|
 |
11
hshpy Apr 13, 2020
试试改 src 属性的 url
|
|
12
cydian Apr 13, 2020 1
|
 |
13
fengbjhqs Apr 13, 2020
有个不成熟的想法，如果子 iframe 是服务器端渲染，可以获取到文本修改后转 blob，在放到 iframe 里
|
|
14
canadahetian OP 通过主页面的按钮,点击后, 滚动到 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 |
|
15
cydian Apr 13, 2020
var v2 = document.getElementById('id').contentWindow;
var v22 = v2.document; v22.scroll(500,500); 元素的位置自己另写代码定位吧。 |
|
16
canadahetian OP @cydian 大哥你是谁别百度个代码的吗？你看一下我给你回复的代码？你写的这些，我不是已经写了吗，来电 Stackflow 精神呗
|
|
17
cydian Apr 13, 2020 via Android
|
|
18
cydian Apr 13, 2020 via Android
|
|
19
canadahetian OP @cydian 不是哥们,你的代码运行,可不行啊,而且我之前不是回复你了吗?
这个代码已经在之前就测试了,没法定位到 iframe 的 a 元素位置,页面文斯不懂啊. |
|
20
canadahetian OP @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 |
|
21
canadahetian OP @cydian 哥们,你的理解能力真的是,幸好没联想到鸦片战争?
你从哪几个关键字,联想到我歧视百度的? 我的意思是说,我的代码都已经精简完,放在哪里了.你就看着代码,直接指点不就可以了吗? 还单独又起一个名字,把之前 document.querySelector("iframe").contentWindow 这个方法,改成了 document.getElementById('id').contentWindow 这么改有什么区别吗?大神? |
|
22
cydian Apr 13, 2020 via Android
|
|
23
canadahetian OP @cydian 是这样,我已经解决了,但是没用你的方法,因为你 d 俄方法 Chrome 控制台,就报错,
我的思路和你分享一下: 首先我之前一直在找高度, 花费了很长时间,用 offsetTop 属性去找高度,发现不管怎么找,永远都是 0,我在 stackflow 上看到有一个人他和我用同样的方法,结果找到的却不是 0, 于是看了一下 scrollTo 方法的各版本的介绍,原来我定位的 iframe 里面的元素高度,是 A 标签,然而 A 标签里面没有给值,所以死活是找不到的. 于是我给 A 标记的父标记,添加了一个 ID 属性(为了方便查找) var iframe__tag = $("#iframename").getElementsByClassName("a_class_name") $.each(iframe__tag , function (index, element) { var h_name = element.parentElement.innerText.replace(/\s+/g, "- ").toLowerCase().replace(/。|\.|\，|\,|\．|\:|\；|\./g, ""); element.parentElement.id = h_idname // console.log(element.parentElement); }); var scroll_y = $("#iframename").documentElement.getElementById(x_text).offsetTop window.scrollTo(0, scroll_y) //直接跳转到标签部分 以上就是思路,感谢回复. |
Select Language