Loading gif not waiting for iFrame to load? - javascript

I want a loading .gif to display until everything has loaded including an embedded iframe. However, currently the loading gif disappears once everything has loaded apart from the iframe. How can I get it to wait until the iframe has loaded too?
Currently using this:
<script>
$(window).ready(function() {
$('#loadinga').hide();
});
</script>
Thanks

<iframe name="xyz"></iframe>
<script>
var expectedLoadCount = 2;
function checkEverythingLoaded() {
expectedLoadCount--;
if (expectedLoadCount > 0) return
$('#loadinga').hide();
}
$("#xyz").on("load", checkEverythingLoaded);
$(window).ready(checkEverythingLoaded);
</script>

suppose your iframe id is iframeId
then try with this-
<iframe id="iframeId" src="..."></iframe>
<script>
document.getElementById('iframeId').onload = function() {
$('#loadinga').hide();
alert('iframe is loaded');
};
</script>

Related

How to load iframe exactly one time if onload is present?

I am trying online on the fly when page reloads based on the userid. For that I am doing
<body>
<iframe frameBorder="0" id="res" src="" height="500" width="500" onload="doit()"></iframe>
</body>
<script>
function doit(){
var t = location.search.split('=')[1]; // get userid from the current page
document.getElementById('res').src="./profile/?id="+t;
}
</script>
but the problem is it will keep recursive querying the /profille/?id={id} due to onload . I need to fire onload exactly one time after body is loaded. How is it possible?
Add flag to save loading state
<script>
var loaded = false;
function doit(){
if (loaded) return;
var t = location.search.split('=')[1]; // get userid from the current page
document.getElementById('res').src="./profile/?id="+t;
loaded = true;
}
</script>

How do I parent redirect visitors to another page if page inside iframe loaded 8 times?

I have embedded a webpage inside iframe and want to parent redirect visitors to another webpage if the page inside iframe has been loaded 8 times? Any idea how to do it?
I can redirect every time when the iframe page load with the following codes.
function replaceLoad(oIframe) {
oIframe.onload = function () {
location.href = 'www.google.com'
}
}
<iframe id="xMyIframe" src="url" onload="replaceLoad(this)">
</iframe>
How can I modify it to suit my purpose?
Thank you
Are you looking for this?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var times = 0;
function iframechange() {
times++;
if( times > 8 ){
window.location.href = "http://google.com";
}
}
</script>
</head>
<body>
<iframe onload="iframechange();" src="http://example.com/"></iframe>
</body>
</html>

How can I execute code in an iFrame's onload event?

I am currently using Ace (http://ace.c9.io/) to take code from an editor and execute it within an iFrame. My issue is that when I add something along the lines of
Code in Editor
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
to the head or body of the iFrame, the code is never executed. This is my current code:
Injecting Code into iFrame
$("#btnRun").click(function(event) {
event.preventDefault();
// iFrame with id="preview"
var preview = $("#preview").contents();
// Get code from editor and wrap in <script> tags
var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue() + "</script>";
// Append code to head or body, in this case head
preview.find("head").append(script);
});
The code is successfully added to the iFrame, however it is never executed. I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched.
I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail.
This is the iFrame in my index.html document.
iFrame in index.html
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<!-- Editor content goes here -->
</iframe>
After the code is injected the iFrame looks like this
iFrame with Injected Code
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<html>
<head>
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
</head>
<body>
</body>
</html>
</iframe>
Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself.
Thank you.
Note: When the code is not within window.onload it runs fine. However I wish to be able to execute this code when the frame's onload function is executed.
I would think that you are adding the JS to the iframe after the onload event has already fired.
Perhaps you could try simulating an event to run the preview code or dispatching the onload event again?
Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent
I was able to fix this myself. The problem was that appending the script to be within the iFrame wasn't enough to make it work. To make the script only be executed within the iFrames DOM was to write directly to it.
$("#btnRun").click(function(event) {
event.preventDefault();
var previewDoc = window.frames[0].document;
var css = ace.edit("css-editor").getSession().getValue();
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html>");
previewDoc.write("<head>");
previewDoc.write("<style type='text/css'>" + css + "</style>");
previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
previewDoc.write("</head>");
previewDoc.write("<body>");
previewDoc.write(html);
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
});
I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript.
I put up a small proof of concept on github. I hope it solves your problem in a more elegant manner.
https://github.com/opreaadrian/iframe-injected-scripts
Cheers,
Adrian.

calling an iframe inside a js function

I'm trying to create an external link, that appears within the same site.
Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA
My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.
Google
<script type="text/javascript">
function executeOnClick(){
<iframe name="your_frame_name" src="www.google.com" > </iframe>
return true;
}
</script>
I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.
Is there any other way to fix my issue..
No javascript is needed, use target attribute:
Load the page
<iframe id="iframe1"> </iframe>
JSFiddle
IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header
function executeOnClick(){
$('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
return true;
}
try this
The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(target) {
document.getElementById("targetFrame").src = target.src;
return false;
}
</script>
In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:
Google
<iframe name="targetFrame" id="targetFrame"></iframe>
Change to this:
onclick="executeOnClick(this); return false;"
and do this in your funcition:
<script type="text/javascript">
function executeOnClick(elem){
var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
document.body.appendChild(frame); // <----append it here.
}
</script>
In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.
please note that the google.com will not work with iframe
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(src) {
document.getElementById("targetFrame").src =src;
}
</script>
<iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>
Use runat attribute too. Hope this works.
If doesn't, what's the error?

onload function js

I have onclick function
if ($this->board['enablecaptcha'] == 1) {
$madness='<div id="lok" onclick="capture_ld()"><a onclick="capture_ld();">Введите капчу</a> </div>';
I need something like
if ($this->board['enablecaptcha'] == 1) {
$madness='<div id="lok" onload="capture_ld()"><a onload="capture_ld();">Введите капчу</a> </div>';
But <a onload="" doesn't work. Help please
you can use onload for body tag
<body onload="capture_ld();">
</body>
or use
<script>
capture_ld();
</script>
This div should load the captcha when page is loaded
You could use window.onload
window.onload = function(){
capture_ld();
};
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.

Categories

Resources