Question

我正在研究组织的新的基于Web的CMS，因此我们只能控制有限的网站。我正在尝试创建一些页内Javascript / jQuery，以帮助我们自定义内容，而不是它提供的现成的自定义。（例如，隐藏div，添加其他按钮，创建计算值以添加到表单输入框等）

此CMS中的许多“编辑记录”按钮（iMIS 200，事实爱好者）使用其内置的核心Javascript在页面中创建新iFrame，并将其显示为编辑记录，然后按“保存”，然后iFrame关闭。

我对Javascript / jQuery还是很陌生，多年来对各种简单的事情不屑一顾。但我想知道是否有可能：

检测是否已创建新的iFrame（我知道它的HTML ID，没关系）
与该新iFrame进行交互，例如在文本顶部插入div

我已经成功地制作了一些（Tampermonkey）Javascript，该Javascript使用parent.document从iFrame到父文档进行检测-因此我已经实现了一些目标，但这些目标只能在Tampermonkey中使用（即Tampermonkey安装在该计算机上的脚本）。我希望能够在父文档的页面中使用Javascript / jQuery，这样我所做的调整才是通用的，而不是基于机器的。

希望我已经明白我的意思了……

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

克里斯

编辑：我已经意识到我没有实际上具有iFrame的ID，但是可以在创建的iFrame中使用具有ID的div。

此外，由于JavaScript中的某种原因，我不得不将jQuery称为jQuery（...不是$（...。

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);

用于检测其他Javascript代码何时创建新iFrame并与iFrame内容进行交互的JavaScript

1 个答案: