JavaScript检测何时由其他JavaScript代码创建新的iFrame，然后与Iframe内容进行交互

Question

我正在研究我们组织的新基于Web的CMS，因此我们只能控制有限的网站。我正在尝试创建一些页面内的JavaScript/jQuery，以帮助我们自定义更多内容，而不是提供的开箱即用自定义。(例如，隐藏divs，添加额外的按钮，创建计算值以添加以形式输入框等(

此CMS中的许多"编辑记录"按钮(IMIS 200，FACT粉丝(使用其烤制，核心JavaScript到页面中的新iframe，并将其显示为编辑记录，然后按"保存"，iframe关闭。

我对JavaScript/jQuery来说是很新的，这些年来，对各种简单的事情都遭受了轰动。但是我想知道是否有可能：

• 检测是否已经创建了一个新的iframe(我知道它的HTML ID，很好(
• 与那个新的iframe互动，例如用一些文字在顶部插入

我已经成功地制作了一些(Tampermonkey(JavaScript，该JavaScript使用parent.document从iframe到父文档 - 因此我能够实现某些目标，但是这些目标只能从Tampermonkey起作用(即那个Tampermonkey脚本安装在该机器上(。我希望能够在父文档上的页面上使用JavaScript/jQuery，以便我进行的调整是通用的，而不是基于机器的调整。

希望我已经明确了我的意思...

预先感谢您提供的任何建议/提示/提示！

chris

编辑：我已经意识到I 实际上具有ID，但可以使用具有ID的DIV，而不是在创建的IFRAME内部使用ID。。

另外，我必须将jQuery称为jQuery(...而不是$(由于JavaScript中的某些原因。

Answer 1

我假设您可以识别要创建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);