问题描述
背景
我正在尝试读取(并最终更改)嵌入在 Confluence 页面中的 body
(在我的示例中这涉及 IFrame
标签)的 h1
中的内容.
融合行为
最初我认为这并不重要,但正如@Scottmarcus 的评论所说明的那样; 确实这项工作是否适用于可能的 Confluence 插件。这是因为我使用的 page decorator 包含在用户编辑 Confluence 页面时执行的 JavaScript。
IFrame 限制
这意味着(据我所知)在将可编辑的 IFrame
添加到 DOM 之后,我不能让 JavaScript 执行。这也意味着我无法控制将哪些内容添加到 IFrame
(尽管这是可以/预期的,因为其想法是在他们添加表格并安装插件时增强用户体验)。
示例
作为参考,以下是 wysiwyg Confluence 编辑器在我的页面上的样子(用下面我的 HTML 中的几个关键元素进行了注释):
问题
虽然我已经能够读取/记录 IFrame
中存在的 HTML,但我似乎无法像在主 document
中那样访问元素。我在下面的内容上尝试了不同的变体,做诸如...
- 通过 ID 选择元素——出于某种原因,这在这种情况下似乎不太可靠?
- 尝试获取元素的
contents()
或children()
-- 在许多情况下,我在尝试此操作时会遇到空引用异常 - 从我的
body
对象访问IFrame
-- 同样,这似乎与执行document.body
不同
JavaScript
function doStuff() {
$('#wysiwygTextarea_ifr').ready(function () {
let iFrame = document.getElementById('wysiwygTextarea_ifr');
let frameDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentwindow.document;
let h1Tags = frameDoc.getElementsByTagName('h1');
//would like to iterate over the collection of h1 tags here,but it always seems to be empty
});
}
HTML
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../Libraries/main.js" type="text/javascript"></script>
<script type="text/javascript">
doStuff();
</script>
<iframe id="wysiwygTextarea_ifr">
#document
<!DOCTYPE html>
<html>
<head>
<title>blah</title>
</head>
<body id="tinymce">
<h1 id="meh">abcde table</h1>
<h1 id="neh">zzz</h1>
</body>
</html>
</iframe>
</html>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)