Capture ajax events inside in an iframe from parent window

Question

How can we capture an ajax event inside an iframe completely from parent window scope? either using jquery or normal javascript?

like, the code in parent window is ,

<body>
<iframe class="childframe" src="http://localhost/ajax-page.php"></iframe>
</body>

and the ajax-page.php contains,

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $.ajax({
    url:'http://localhost/',
    complete: function(data){
       alert('ajax complete inside iframe');
    }
  });
});
</script>

I want to trigger a function in parent window when the ajax event is completed inside iframe.

Answer 1

如果父框架和子框架位于同一域（在这种情况下均为本地主机，那么我假设它们都在）：

window.parent.myFunctionInParent();

Answer 2

use http://www.jacklmoore.com/colorbox/

Example:

$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

<p><a class='iframe' href="http://wikipedia.com">Outside Webpage (Iframe)</a></p>

Capture ajax events inside in an iframe from parent window

Question

2 answers

solution1
0 2014-03-21 21:00:47

solution2
0 2014-03-21 21:37:19

Capture ajax events inside in an iframe from parent window

Question

2 answers

solution1 0 2014-03-21 21:00:47

solution2 0 2014-03-21 21:37:19

solution1
0 2014-03-21 21:00:47

solution2
0 2014-03-21 21:37:19