I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/
Related
I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best
You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}
This is an ASP.Net MVC 5 project.
I have a simple javascript/jQuery as follow:
<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase);
});
});
</script>
As you can see, there is a jQuery .load method which calls SearchSingular action in the Search controller when the focus is out from HTML element with id = textBox. This works well, except that the SearchSingular action execution may sometimes take time to finish.
Thus, I want to show a loading image when the load is not finished. Is there any way to do this?
Turn it into a callback
// Somecode to display a image
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function() {
// Somecode to remove image
});
You can use a loading image while div contents load
("#loadingImage").show();
$("#commentDiv").load("../Search/SearchSingular?phrase=" + phrase, function(){
$("#loadingImage").hide(); // hide the image after loading of div completes
});
Div for your loading image
<div id="loadingImage">
<img src="loader.gif">
</div>
There is a complete callback of jQuery .load function (read more http://api.jquery.com/load/)
You could revise your javascript as following:
<script>
$(document).ready(function () {
$("#textBox").focusout(function () {
var phrase= $("#textBox").val();
phrase= phrase.replace(new RegExp(/\s+/, 'g'), "%20");
ShowLoading();
$("#commentDiv").load(
"../Search/SearchSingular?phrase=" + phrase,
function () { HideLoading(); }
);
});
});
</script>
This is my HTML :-
<iframe src="Dyanamicallygeneratedpath" id="iPrintform" name="iPrintform" class="iframeDisable" scrolling="auto" height="600" width="650" style="display:block;"></iframe>
Jquery :-
1st Attempt :-
var iFrame = $('#iPrintform');
iFrame.bind('load', function () { //binds the event
alert('iFrame Reloaded');
});
2nd Attempt:-
$("#iPrintform").on("load", function () {
alert("Iframe loaded");
});
I tried binding load event, onready event to iframe, nothing is working for chrome.
Try implementing below code.
var iframeID = $('#iPrintform').contents();
iframeID.find("addevents").click(function(){
alert("working");
});
Wait until iframe is loaded, then bind via the iframe's contentWindow.document
var xiframe = $('iframe')[0];
iframe.onload = function(){
// log("iframe loaded");
$(xiframe.contentWindow.document)
.bind(function(){ ... });
$(xiframe.contentWindow.body).addClass('..');
};
I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.
$(window).load(function () { //Your Function
});
I use This Load Function For Apply Some Design After Complete some Web service Process.
It's Work Fine in All Browser But IN IE Not Worked....
Load Function Apply Before Web service Completed
Any Help
my Code Set Up
<img src="img/Loading.png" id="image" alt="loading" />
Show Image Code
$(document).ready(function () {
$('#image').show();
});
//Web service process after Complete
Hide image code
$(window).load(function () {
$('#image').hide();
});
try this for IE:
window.onload = new function() { //Your Function };