检测其他Javascript代码何时创建了新的iFrame，然后与iFrame内容进行交互
检测其他Javascript代码何时创建了新的iFrame，然后与iFrame内容进行交互
提问于 2019-05-19 21:59:42
我正在为我们组织的新的基于网络的CMS工作，所以一个我们只能有限控制的网站。我正在尝试创建一些页面内的Javascript/jQuery，以帮助我们定制比它提供的开箱即用定制更多的东西。(例如，隐藏div、添加额外的按钮、创建要添加到表单输入框的计算值等)
在这个内容管理系统(iMIS 200，事实迷)中的许多“编辑记录”按钮使用它的内置核心Javascript在页面中创建一个新的iFrame，它显示它来编辑记录，然后你按下“保存”，iFrame关闭。
我是Javascript/jQuery的新手，多年来刚接触过各种简单的东西。但我想知道是否有可能：
- 检测到已经创建了一个新的iFrame (我知道它的HTML，这很好)
- 与新的iFrame交互，例如在顶部插入带有一些文本
的div
我已经成功地制作了一些( Tampermonkey ) Javascript，它使用parent.document来检测从iFrame到父文档的内容-所以我已经能够实现一些目标，但这些只能在Tampermonkey (也就是安装在那台机器上的Tampermonkey脚本)上工作。我希望能够在父文档的页面中使用Javascript/jQuery，这样我所做的调整是通用的，而不是基于机器的。
希望我已经说清楚了我的意思。
提前感谢您能提供的任何建议/提示/提示！
克里斯
EDIT:我已经意识到我实际上没有iFrame的ID，但是可以在创建的iFrame中使用带有ID的div。
此外，我必须将jQuery称为jQuery(...不是$(...由于某种原因在Javascript中。
回答 1
Stack Overflow用户
发布于 2019-05-19 22:20:33
我假设您可以确定一个要在其中创建iframe的元素。您可以使用MutationObserver API来实现这一点：
//select element inside which an iframe will be created
//changes made inside that element will be tracked by the observer
var target = $( ".outer-iframe" )[0];
var observer = new MutationObserver(function( mutations ) {
mutations.forEach(function( mutation ) {
var newNodes = mutation.addedNodes; // get the list of added nodes
if( newNodes !== null ) { // if any node was added
var $nodes = $( newNodes ); // create a jQuery set
$nodes.each(function() { // for each node
var $node = $( this );
if( $node.is("iframe#id-that-you-expect") ) {
//if that's the iframe you are looking for
//add a div at the begining of it's body
$node.find("body").prepend("<div>Your div inside iframe</div>")
}
});
}
});
});
// observer configuration
var observerConfig = {
attributes: true,
childList: true,
characterData: true
};
// start observing
observer.observe(target, observerConfig);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56208528
复制相关文章
相似问题