Triggering event on change of element in unordered list in an iframe

问题

I am developing an app using node-webkit. I have an iframe which loads a webpage. The webpage has an unordered list and I would like to get a trigger if an element in the unordered list changes.

<iframe id="app" src="https://www.somewebsite.com/" nwdisable nwfaketop></iframe>

The unordered list does not have a class name and its only tag is data-reactid="XYZ". However the first item in the unordered list always has a class name: .abc

From another SO question (Call jquery function when <ul> content change) , I found how to trigger a function if there is a change:

! function () {
    var ulContent;
    $(document).ajaxStop(function () {
        var $ul = $('.abc');
        if(ulContent !== $ul.html()){
            ulContent = $ul.html();
            $ul.trigger('contentChanged');
        }
    });
}();

$('.abc').on('contentChanged',function(){alert('UL content changed!!!');});

However I believe right now, the script is looking for the class .abc in the current page's source code rather than that of the iframe.

To extract the source code of the iframe I wrote:

innerBody = document.getElementById('app').contentWindow.document.body.innerHTML;

What would be the way to make the ajax function look into the iframe's source code? Also what does the ! signify in the ajax function?

来源：https://stackoverflow.com/questions/30544027/triggering-event-on-change-of-element-in-unordered-list-in-an-iframe