这是一个创建于 2008 天前的主题，其中的信息可能已经有所发展或是发生改变。
主页里包含了一个 iframe, JS 代码只能写在主页面里, 是否可以实现通过 主页面的 js 脚本,操作 iframe 里的锚点属性 主页面 点击 跳转到 iframe 下的对应锚点元素 testpoint
请各位前端前辈,指点一下.非常感谢!
 | 1 gqbre 2020-04-13 09:02:51 +08:00 首先要同域 |
 | 2 albyBen 2020-04-13 09:10:51 +08:00 完成这件事的前提是你能修改 iframe 内的 js 代码，通过 hashchange 或者 postMessage 检测到主页面 js 代码的修改内容,然后在做锚点跳转操作；貌似百度富文本编辑器 ueditor 某个版本可以对 iframe 进行处理，能不能实现需要你自己去探索了 |
 | 3 canadahetian OP @gqbre 绝对同域 在同一个服务器的,同一个项目文件夹, 主 html 路径 /项目 /static/index.html iframe 包含的 html 路径 /项目 /static/html/1.html 请指点一下,拜托了,感谢 |
 | 4 cydian 2020-04-13 09:35:49 +08:00 via Android 父对子 只要同域什么都能做啊 |
 | 5 rabbbit 2020-04-13 09:36:31 +08:00  1 document.querySelector("iframe").contentWindow |
| 6 canadahetian OP |
 | 7 CodingMonkey 2020-04-13 10:01:55 +08:00 @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 2020-04-13 10:24:55 +08:00 via Android 直接对子操作啊。 你对父操作干啥？ |
| 10 canadahetian OP @cydian 怎么操作啊大神,指点一下,我前端 Noober |
 | 11 hshpy 2020-04-13 10:38:26 +08:00 试试改 src 属性的 url |
| 12 cydian 2020-04-13 10:39:04 +08:00 1 |
 | 13 fengbjhqs 2020-04-13 11:06:12 +08:00 有个不成熟的想法，如果子 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 2020-04-13 12:21:46 +08:00 var v2 = document.getElementById('id').contentWindow; var v22 = v2.document; v22.scroll(500,500); 元素的位置自己另写代码定位吧。 |
| 16 canadahetian OP @cydian 大哥你是谁别百度个代码的吗？你看一下我给你回复的代码？你写的这些，我不是已经写了吗，来电 Stackflow 精神呗 |
| 17 cydian 2020-04-13 21:27:42 +08:00 via Android |
| 18 cydian 2020-04-13 21:29:07 +08:00 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 2020-04-13 23:19:24 +08:00 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