Develop Reference

feedback onload a iframe sometime not work well

I have an iframe inside my page.
<iframe id="iframe" src="myurltopage" name="iframe" title="..." overflow-y='scroll' overflow-x='hidden'></iframe>
<div id="spinner"><h3><i class="fa fa fa-spinner fa-spin"></i></h3></div>
I add a spinner on basic-HTML, and inside a function to hide it, if the iframe is the load.
$(document).ready(function(){
$('#iframe').on('load', function()
{
$('#spinner').fadeOut();
}
});
Sometimes, the spinner won't hide even though I see the page is correctly loaded and in the console, I cannot see any open loading processes. I have to reload the page one times, sometimes more, than all works fine.
Did anyone have an idea what it can cause and/or how I prevent this issue?
Thanks a lot.

If you want to hide spinner when all the content is ready on the page (means all the resources are downloaded like images, fonts, css, scripts, iFrames etc) then you can use following code. If you want hide spinner when only that iFrame is loaded please refer the link which I have also entered in the comment.
$(window).on('load', function() {
$('#spinner').fadeOut();
});

Based on the linked info in the comments of the question, from Rahul Raut, i decide to solve it in this way
var init=false;
$(function () {
var innerDoc = ($("#iframe")[0].contentDocument) ? $("#iframe")[0].contentDocument:$("#iframe")[0].contentWindow.document;
innerDoc.onreadystatechange = function () {
if(init==false){ alert("Go"); }
if ($('#spinner').is(":visible") == true){ $('#spinner').fadeOut(); }
return;
};
setTimeout(innerDoc.onreadystatechange, 3000);
});

How to resize an iframe after all jquery ajax requests are done

I have an html document with an iframe in it. The parent document and the document in the iframe (a wordpress blog) are in the same domain. The iframe auto-adjusts its height on load event to fit its content like this:
<iframe width="100%" height="100%" id="parent-iframe" name="parent-iframe" src="/blog" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
It works fine. But now, the blog which is mostly one page with a facebook feed, has been updated with a "load-more" button to limit the number of posts displayed. Much like an infinite scroll but with a button.
What I want is to be able to resize the parent iframe on the "load-more" button click. Since the facebook feed is provided by a wordpress plugin and it gets updates every now and then, I'd rather not mess with its files directly. Also the javascript code is minified so it looks like jibberish to me.
Fortunately, it also provides a backoffice textbox to include custom code. Since jQuery is already loaded, I tried this:
jQuery(document).ready(function () {
jQuery("load-more").click(function () {
var frame = $('#parent-iframe', window.parent.document);
var height = jQuery('body').height();
frame.height(height);
});
});
It works as expected but with one caveat. Whenever the click event is triggered, the function is executed before the new post gets loaded therefore the body height is always one step behind. I could add a fixed amount of pixels
to compensate but some posts are significantly larger than others.
I don't do this kind of work very often so I need help. I was looking at the jQuery deferred objects but quite honestly I'm a bit lost. Can somebody briefly explain to me how does it work and how to fix it?

Thanks to #jfriend00 suggestion, I think I've found a somehow working solution.
Since the plugins javascript file is minified and I'm not used to javascript debugging, I couldn't find the end of the load-more ajax call.
All I needed then was to wait until all ajax requests were finished. So I found this post jquery.ajaxStop() and tried this:
jQuery(document).ready(function () {
jQuery("load-more").click(function () {
$(document).ajaxStop(function () {
var frame = $('#parent-iframe', window.parent.document);
var height = jQuery('body').height();
frame.height(height);
$(document).unbind("ajaxStop");
});
});
});
Now it works. Please excuse me if I haven't been able to explain myself better. As I said I'm not used to this so I'm lacking in proper terminology and concepts. If you have any suggestions regarding the post title, details or tags in order to make it useful to others I'd be glad to edit it accordingly.
It also works and looks cleaner like this:
<iframe width="100%" height="100%" id="parent-iframe" name="parent-iframe" src="/blog" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight" onresize="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
parent iframe
$(document).ready(function () {
$("#load-more").click(function () {
$(document).one("ajaxStop", function () {
window.parent.$("#parent-iframe").trigger('resize');
});
});
});
child document jquery

How to get Anchor Links to work in Jquery Mobile?

Jquery Mobile has decided to treat anchor links as page requests of sort. However, this isn't good if you have a load of blog posts which have anchor links to the same page (ie href="#specs").
Is there a way to disable jquery mobile's anchor link usage on a specific page which I know I won't be using it on so I can use anchor links as they were intended, to drop down to a part of the page?
I only need a solution for anchor links on the same page (ie: href="#specs").
thanks

You could try adding a data-ajax="false" on the anchor tag.
Linking without Ajax
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition. Both attributes (rel="external" and data-ajax="false")
have the same effect, but a different semantic meaning: rel="external"
should be used when linking to another site or domain, while
data-ajax="false" is useful for simply opting a page within your
domain from being loaded via Ajax. Because of security restrictions,
the framework always opts links to external domains out of the Ajax
behavior.
Reference - http://jquerymobile.com/demos/1.0.1/docs/pages/page-links.html

If you are like me, converting an existing site and you don't want to go through every page right now. You can add one line of code to your header and all of your header and all of your existing internal anchor links will get the data-ajax="false" tag added.
Of course, this assumes you are including your own javascript file up in the header already. If you are not you would have to touch every page anyway. But I have a single javascript file that is included in every page already so I added this line...
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
This goes in your $(document).ready() block. If you don't have that block yet, here is the entire block.
$(document).ready(function() {
$("a").each(function () { if(this.href.indexOf("#")>=0) $(this).attr("data-ajax",false); });
});
Hope this helps. It is the same solution user700284 offers but in an automated way.

You can add the following code to the end of your page:
<script type="text/javascript">
$('a.native-anchor').bind('click', function(ev) {
var target = $( $(this).attr('href') ).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
});
</script>
And add the class "native-anchor" to your anchor links.
It is not a total sollution, because the back button of your browser will move you to the previous page and not to the position of the link, but it is better than the links not working at all.
I found this sollution here: jQuery Mobile Anchor Linking

$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});

First you have to place this code into a custom.js file
$(document).bind('mobileinit', function () {
$.mobile.loader.prototype.options.disabled = true;
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.loadingMessage = false;
});
Then add this file into your webpage before the jquery mobile js is loaded. becuase 'mobilinit' event is triggered immediately

Thank you
this solution worked for me
<script>
$(document).ready(function() {
$("a").each(function() {
if (this.href.indexOf("index.php") >= 0) $(this).attr("data-ajax", false);
});
});
</script>
I replaced # with index.php which is my document root.
But, it doesn't work for form button i.e input type="submit"

// On page load on mobiles only, look for the specific a tag you want to take control over,
// alternatively you can still target all 'a' tags
$('a[href*="#component"]').each(function () {
// then set data-ajax to false,
$(this).attr("data-ajax", false);
// at this point you can add the class to your target a tags.
// You can do it elsewhere but because for this example my
// 'a' tags are automatically generated so I just add the class here
$(this).addClass('in-pagelink');
// then target the class and bind to a click event
$('a.in-pagelink').bind('click', function (ev) {
// here I redirect the page with window.location.assign
// as opposed to window.location.href. I find that it works better
window.location.assign(this.href);
// then I close my navigation menu
closeAll();
});
});

Jquery manage local script with full ajax site

Basically my app work like that :
Index.php manage call to other pages.
Each page contains 2 function onLoad() and onClose() which are redefined in each page
Index.php call the pages and execute the onLoad
Basically, i preload the page in a hidden div, i execute the predefined $.onLoad function and the i put the loaded content into a visible div
My question is only about the onLoad() scope, i want to remove code from the jquery eval seq when i change page, but i need a way to define it in the page.php file without knowing the container
The eval/seq is probably the eval queue of jquery, can't found info about that, just obtain with firebug...
In 2 words, i would like to be able to remove injected dom and script when i change context (pages)
index.php
$.onLoad = function() {}
$("#blabla").onChange(function() {
$("#data_iframe").load(chaineUrl, {}, function(responseText, textStatus, XMLHttpRequest) {
$("#data_iframe").ready(function() {
$("#data_div").children().remove();
$.onLoad();
$("#data_iframe").children().hide().appendTo($("#data_div")).show(); $("#data_iframe").children().remove();
$.onLoad = undefined;
}
});
});
page.php
<script>
$.onClose = (function(){
$('#container').blablabla();
//alert("test");
});
$.onLoad = (function(){
$('#container').blablabla();
}
</script>
The problem is that the jquery EVAL/SEQ keep growing each time a page is opened
and there are some side-effect like calling multiple time a function...
I guess its a scope problem so can you help me correct my code
(i've try with or without the $ but doesn't change anything)
just for information
<div id="data_div"></div>
<div id="data_iframe"></div>
Thanks

I usually use $(document).ready instead of onload. No need to do the "onload" trigger in load complete function. The ready function within the page.php will do the same job.
And how about direct load into data_div?
index.php
$("#blabla").onChange(function() {
$("#data_div").load(page.php);
});
page.php
<script>
$(document).ready(function() {
$('#container').blablabla();
});
</script>
I didn't try page close function before, may be it is not what you want. But you can try:
<script>
$(document).ready(function() {
$('#container').blablabla();
$(window).unbind('unload');
$(window).unload(function(){
$('#container').blablabla();
//alert("test");
})
});
</script>

jQuery iframe load() event?

Does anyone know if there is such a thing?
I have a iframe that's being inserted with $.ajax() and I want to do some stuff after the contents from the iframe are completely loaded:
....
success: function(html){ // <-- html is the IFRAME (#theiframe)
$(this).html(html); // $(this) is the container element
$(this).show();
$('#theiframe').load(function(){
alert('loaded!');
}
....
it works, but I see the IFRAME is loaded twice (the alert also shows twice).

use iframe onload event
$('#theiframe').on("load", function() {
alert(1);
});

If possible, you'd be better off handling the load event within the iframe's document and calling out to a function in the containing document. This has the advantage of working in all browsers and only running once.
In the main document:
function iframeLoaded() {
alert("Iframe loaded!");
}
In the iframe document:
window.onload = function() {
parent.iframeLoaded();
}

Along the lines of Tim Down's answer but leveraging jQuery (mentioned by the OP) and loosely coupling the containing page and the iframe, you could do the following:
In the iframe:
<script>
$(function() {
var w = window;
if (w.frameElement != null
&& w.frameElement.nodeName === "IFRAME"
&& w.parent.jQuery) {
w.parent.jQuery(w.parent.document).trigger('iframeready');
}
});
</script>
In the containing page:
<script>
function myHandler() {
alert('iframe (almost) loaded');
}
$(document).on('iframeready', myHandler);
</script>
The iframe fires an event on the (potentially existing) parent window's document - please beware that the parent document needs a jQuery instance of itself for this to work. Then, in the parent window you attach a handler to react to that event.
This solution has the advantage of not breaking when the containing page does not contain the expected load handler. More generally speaking, it shouldn't be the concern of the iframe to know its surrounding environment.
Please note, that we're leveraging the DOM ready event to fire the event - which should be suitable for most use cases. If it's not, simply attach the event trigger line to the window's load event like so:
$(window).on('load', function() { ... });

That's the same behavior I've seen: iframe's load() will fire first on an empty iframe, then the second time when your page is loaded.
Edit: Hmm, interesting. You could increment a counter in your event handler, and a) ignore the first load event, or b) ignore any duplicate load event.

Without code in iframe + animate:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
jQuery(document).ready(function($) {
$(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500)
});
}
</script>
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >

You may use the jquery's Contents method to get the content of the iframe.

If you want it to be more generic and independent, you can use cookie. Iframe content can set a cookie. With jquery.cookie and a timer (or in this case javascript timer), you can check if the cookie is set each second or so.
//token should be a unique random value which is also sent to ifame to get set
iframeLoadCheckTimer = window.setInterval(function () {
cookieValue = $.cookie('iframeToken');
if (cookieValue == token)
{
window.clearInterval(iframeLoadCheckTimer );
$.cookie('iframeToken', null, {
expires: 1,
path: '/'
});
}
}, 1000);