how to alert user for div changes inside an OBJECT

Question

i want to alert the user if there are changes inside the div, or if any of the children divs content has changed,

the div that i'm trying to detect is inside an object!

this is my code:

<object type="text/html" data="https://secure.brosix.com/webclient/?nid " style="width:710px;height:555px; border:none;">
</object> 

<script>
$('#BrosixChatReceive').bind('contentchanged', function() {
  // do something after the div content has changed
  alert('woo');
});

$('#BrosixChatReceive').trigger('contentchanged');
</script>

code inside the Object "With no Changes"

<div class="BrosixChatReceive" id="BrosixChatReceive" style="width: 344px; height: 476px; "></div>

this is the code when changes has been made from the div inside the object:

<div class="BrosixChatReceive" id="BrosixChatReceive" style="width: 344px; height: 476px; ">

<div class="BrosixChatWith" id="chatwith-85905" style="display: block; ">
<div class="BrosixChatItemOther"><div class="BrosixChatItemTime">18:34:36</div>
<div class="BrosixContactUsername" style="font-weight:bold;">person1</div>
<div class="BrosixChatMessage">message 1</div>
</div>
<div class="BrosixChatItemOther"><div class="BrosixChatItemTime">18:36:02</div>
<div class="BrosixContactUsername" style="font-weight:bold;">person1</div>
<div class="BrosixChatMessage">message 2</div>
</div>
<div class="BrosixChatItemOther"><div class="BrosixChatItemTime">18:36:54</div>
<div class="BrosixContactUsername" style="font-weight:bold;">person1</div>
<div class="BrosixChatMessage">message 3</div>
</div>
</div>
<div class="BrosixChatWith" id="chatwith-91218" style="display: none; ">
<div class="BrosixChatItemOther"><div class="BrosixChatItemTime">18:35:07</div>
<div class="BrosixContactUsername" style="font-weight:bold;">person2</div>
<div class="BrosixChatMessage">message 1</div>
</div>
</div>

</div>

is there any way to detect this changes, and alert the user when this changes has been made?

"ALSO I have no way to change the code of the webpage inside the OBJECT"

so this has to be done without editing the content of the object.

Isn't it some javascript direcly putting the user input in those divs ? — Denys Séguret, Oct 05 '12 at 11:27
it's an app from another webpage and there is no way for me to edit that — telexper, Oct 05 '12 at 11:28

score 1 · Answer 1 · edited May 23 '17 at 12:12

Here's a function similar to the one I proposed in another answer :

function survey(selector, callback) {
   var input = $(selector);
   var oldvalue = input.html();
   setInterval(function(){
      if (input.html()!=oldvalue){
          oldvalue = input.html();
          callback();
      }
   }, 100);
}

survey('#yourdivid', function(){console.log('changed')});

The callback given to survey is called each time the div with id yourdivid is changed. The check is done every 100 ms.

But a better solution is usually to change the script modifying the div to get the alert directly.

As you mention "another webpage" I must warn you that this can't work if the content comes from another domain.

Why ? Does it come from another domain (not having authorized the spying through CORS headers) ? — Denys Séguret, Oct 05 '12 at 11:39

how to alert user for div changes inside an OBJECT

1 Answers1