We Keep Coding

Call user defined jQuery function with JS

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();
}
});
}
}

iframe content get notice when scroll to bottom

I display a pdf document inside an iframe and I want to check if user has read the document before he can validate my form.
It seems to be easy but after lots of try, I still not be able to do this.
I try many ways like implement scroll function like this :
$("#myFrame").scroll(function(){
if ($("#myFrame").scrollTop() + $("#myFrame").innerHeight() + 20 >= $("#myFrame")[0].scrollHeight) {
alert("scroll is over");
}
});
and my iframe is :
<iframe id="myFrame" height="600" width="800" src="myDoc.pdf">
</iframe>
Thank you for your help.

This works flawlessly
$(function () {
$("#iframeid").load(function () {
var iframe = document.getElementById("iframeid").contentWindow;
$(iframe).scroll(function () {
if ( $(iframe).scrollTop()==$(iframe).height()-$("#iframeid").height()) {
alert("Reached bottom!");
}
});
});
})

How to wait until iframe refresh is done before executing function?

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/

IFrame OnReadyStateChange function

I have an asp.webforms application and on page a i have a hidden div with progressbar and iframe. To iframe i try loaded form from another application on same domain.
<div id="pagePreview" style="display: none;">
<div class="progressBarWrapper" id="waitDialog" style="opacity:1;filter:alpha(opacity=100);display:none;">
<div class="progressBarDetail" style="margin-top:25%;">
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/Images/wait.gif" />
</div>
</div>
<iframe id="previewContent" onreadystatechange="iframeLoaded(this);"></iframe>
</div>
On a click event i call a function to show this div in jqueryUI dialog and i Want show progressbar until the page in Iframe is not loaded.
var isClickedForDialog = false;
function iframeLoaded(args) {
if (args.readyState == "complete" && isClickedForDialog) {
var pagePreview = $('#pagePreview'); // dialog
var waitDialog = $('#waitDialog'); // progress
waitDialog.hide();
isClickedForDialog = false;
}
}
function showModalWindow(url, hideCloseButton) {
isClickedForDialog = true;
var previewContent = $('#previewContent'); // Iframe
var pagePreview = $('#pagePreview'); // dialog
var waitDialog = $('#waitDialog'); // progresss
waitDialog.show();
previewContent.attr('src', url);
pagePreview.dialog(
{
draggable: false,
resizable: false,
height: 764,
width: 1020,
modal: true,
close: function (event, ui) {
previewContent.attr('src', '');
},
open: function (event, ui) {
if (hideCloseButton) {
$(this).parent().children().children('.ui-dialog-titlebar-close').hide();
}
}
});
}
In IE everything works fine. The dialog box and progressbar displays and when the URL is loaded in an iframe, progressbar disappears and i see only webforms in IFrame.
But in FireFox and Chrome this does not work.
The browser ignores the onreadystatechange event. I tried to handle an event as following:
$('#previewContent').bind('onreadystatechange', iframeLoaded, false);
$('#previewContent').on('onreadystatechange', iframeLoaded);
but without success.
know how to solve this? thanks

I'm not sure if there's some specific reason why you're using onreadystatechange, but if you just want to know when the iframe is done loading, the load event will handle that.
$('#previewContent').on('load', iframeLoaded);

Adding the onreadystatechange attribute to an iframe tag as shown in the original question doesn't seem to do anything. Don't do this:
<iframe onreadystatechange="iframeReady(this);"></iframe>
Instead, grab a reference to the iframe element and add a DOMContentLoaded listener to its contentDocument property. Since your iframe might already be fully loaded, you should check its contentDocument's readyState and cancel the listener if the iframe isn't loaded yet. Finally, some browsers - namely Firefox - don't currently emit a DOMContentLoaded event from iframes, so for a fallback you could add a load listener on the iframe's contentWindow property, or the iFrame itself.
function listenForIframeReady() {
if (iframe.contentDocument.readyState === "interactive" || iframe.contentDocument.readyState === "complete") {
iframeReady();
} else {
iframe.contentDocument.addEventListener('DOMContentLoaded', iframeReady);
iframe.contentWindow.addEventListener('load', iframeReady);
iframe.addEventListener('load', iframeReady);
}
}
function iframeReady() {
console.log('iframe is ready');
iframe.contentDocument.removeEventListener('DOMContentLoaded', iframeReady);
iframe.contentWindow.removeEventListener('load', iframeReady);
iframe.removeEventListener('load', iframeReady);
}
var iframe = document.querySelector('iframe');
listenForIframeReady();

how to know the webpage is loaded

i have a iframe and i am redirecting pages in iframe.
how to get the event for each page loading finish.
main.html
<html>
<body>
<iframe src="http://www.child.html" id="childframe" style="height:100px"></iframe>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(window).load(function(){
var Body = $("#childframe").contents().find("body");
var Element = Body.find("tag");
// page is redirecting to new page
$(Element[0].click());
window.setTimeout(reallyNext, 1000);
function reallyNext() {
//how to know inner page is loaded
var result= Body.find("#tag1");
//how to get element from anotherpage.html
$(result).bind('DOMSubtreeModified', function(event) {
//how to reach here
});
}
});
</script>
</body>
</html>
child.html
<html>
<head></head>
<body>
<p><br></p>
</body>
</html>
please tell me how to know the inner page of iframe has done loading?

You can use the onload paremeter inside the body tag, which runs after the page is loaded.
For example:
<body onload="myJavascriptFunction();" >

$('#childframe').ready(function() {
...
});
or
$('#childframe').load(function() {
...
});

<script language="javascript">
iframe = document.getElementById("frameid");
WaitForIFrame();
function WaitForIFrame() {
if (iframe.readyState != "complete") {
setTimeout("WaitForIFrame();", 200);
} else {
done();
}
}
function done() {
//some code after iframe has been loaded
}
</script>
This should work

You can hook on the onLoad javascript event of the <iframe /> element (like <iframe onLoad="myHandler" />, where myHandler is your js function), or, if using jQuery, with the following snippet:
$('#childframe').load(function() {
// your code handling the iframe loaded.
});
Note, that your code needs to be part of the page that holds the iframe not the page within it.