We Keep Coding

How to show ajax-loader each time when an iframe is loaded

I have seen many ajax loader which shows until an iframe finishes loading.But my question is there anyway I could show an ajax loader each time the content inside the iframe loads?
Example:
If I loaded a webpage in an iframe,it shows the loader.But after it been loaded,I clicked on another link inside the iframe webpage and when the page inside the iframe is loading it should show the loader again.
Is there anyway I could do this?

Dear You can show the loaded by adding a div on parent page and create a javascript function on parent page and then call that function from iframe using parent.methodonpareentpage
Parent Page
<iframe id="iframe" src="url" style="height:600px; width:700px; display:none;"></iframe>
<div id="divIframeLoader" style="height:600px; width:700px;">
<img src="Images/loading_async_big.gif" style="position:relative; top:12%; left:40%;" />
</div>
<script type="text/javascript">
function showIframeLoader(btrue)
{
if (btrue)
{
jQuery("#divIframeLoader").show();
jQuery("#iframe").hide();
}
else {
jQuery("#divIframeLoader").hide();
jQuery("#iframe").show();
}
}
</script>
iframe page
parent.showIframeLoader(true);

How to delay loading iframe in a jquery collapsed div until after clicking the div/button?

Basically, I have a whole lot of these collapsing divs on one page, which have iframes inside the collapsed div. (I used css to make the clickable div look like a button.)
The problem is that it's taking a very long time for the page to load, because basically it's loading every single domain in each iframe every time the page loads.
I want to delay loading any of the iframes unless the div is clicked.
Here is my code currently:
the Javascript
jQuery(document).ready(function() {
jQuery(".cont").hide();
jQuery(".title").click(function()
{
jQuery(this).next(".cont").slideToggle(500);
});
});
the HTML
<div class="layer1">
<p class="title">test</p>
<div class="cont">
<iframe src="http://example.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example2.com" scrolling="no"></iframe>
</div>
<div class="cont">
<iframe src="http://example3etc.com" scrolling="no"></iframe>
</div>
still need a solution.

What about only inserting it into the DOM after the button is clicked?
jQuery(document).ready(function() {
$("cont1").click(function()
{
$("cont1").html("<iframe src='http://example1.com' scrolling="no"></iframe>")
}
);
$("cont2").click(function()
{
$("cont2").html("<iframe src='http://example2.com' scrolling="no"></iframe>")
}
);
});
And so on. And you could use a "remove" button to remove the html afterwards?

How to bind an iframe with 'on' method in jquery?

Bind an iframe with on method in jquery.
I am using jquery mobile lib with an iframe in page.
$(frame).contents().on('tap', 'div', function() { console.info('sucess')} )}
How to bind the iframe with on method?
Here I tried to get tap function bind to iframe contents with on method.
//Structure of HTML page
<div data-role="page" id="test" tabindex="0" class="ui-page ui-body-c" style="min-height: 491px;">
<iframe height="491" frameborder="0" width="100%" src="about:blank" name="test">
// ...
<div id="one" data-role="page">
<div data-role="content">
// Contents
</div>
</div>
// ...
</iframe>
</div>
The click method
$(frame).contents().click(function(e) { alert('sucess'); }) will work. But when it comes with mobile device click method doesn't works...

I would try to set an ID to the iFrame and bind on it like this :
$('#iFrameId).on('tap', 'div', function() { console.info('sucess'); });
Remember that you NEED to create your event binding in the script included in the first page loaded with JQuery mobile. By design, all JS scripts included in other files loaded later are ignored.

jsbin
you need attach the handler to iframe's contentDocument:
$($frame[0].contentDocument).on('click', '#tap', function(){
alert('success');
});

Issue with dijit.Dialog and remote content

I am trying to open a dijit.Dialog when the user clicks on a link.
Furthermore, I want for this dialog to fetch the remote content of the iframe (e.g. the google home page) when the dialog opens and not when the page containing the dialog loads.
Here is the JS:
dojo.require("dijit.Dialog");
dojo.require("dijit.form.Button");
function showDialog() {
console.log('showDialog');
dojo.byId('ifr').src = 'http://www.google.fr';
dijit.byId('dialogOne').show();
}
var link = dojo.byId('link');
dojo.connect(link, 'onclick', showDialog);​
Here is the HTML:
open link
<div id="dialogOne" data-dojo-type="dijit.Dialog" title="My external dialog">
<iframe id='ifr' width='300px' height='450px'> </iframe>
</div>​
Here is the jsfiddle: http://jsfiddle.net/8eenG/6/
However, this doesn't seem to work...

I totally misread your question and went ahead and starting hacking away.
This doesn't load remote content, but it fixes all of your other problems.
See demo here: http://jsfiddle.net/5uuCX/
Javascript
require(["dojo/parser", "dojo/on", "dojo/dom", "dijit/registry"],
function(parser, on, dom, registry) {
parser.parse();
on(dom.byId("link"), "click", function(e) {
registry.byId('dialogOne').show();
});
});​
HTML
Click to Open Dialog
<div id="dialogOne" data-dojo-type="dijit/Dialog" title="My external dialog">
<div id="foo" data-dojo-type="dojox/layout/ContentPane" href="http://fiddle.jshell.net/259fD/show/">
</div>
</div>​

how to change a div from an iframe in another div

I have two divs
<div id="leftdiv"><!--#exec cgi="test.cgi"--></div>
<div id="rigthdiv" >
<iframe name="rigthdiv" class="contentiframe"allowTransparency="true" frameborder="0" src="iframebg.html"><body STYLE="background- color:transparent"></iframe>
</div>
I am trying to change the leftdiv from iframe. I called the js below from the iframe but nothing changed. What's wrong? Thanks
function test() {
parent.document.getElementById("leftdiv").innerHTML = 'Processing complete.';
}

It won't work on chrome, but it can work on firefox or IE. Chrome doesn't support iframe normally when you use javascript. You can try to use JQuery.