Sample code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function on_iframe_load() {
document.getElementById('iframe_a').onload = function() {
alert('Thanks for the visit!');
};
}
</script>
</head>
<body>
<iframe name="iframe_a" id="iframe_a"></iframe>
Go!
</body>
</html>
It works in all major browsers with no problem, but IE8 (and probably prior versions) don't understand it.
Update: Just came up with a solution, but I'm not sure if it's right coding. Please review:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var clicked = false;
function activate() {
clicked = true;
}
function pop() {
if (clicked) {
alert('Thanks for the visit!');
};
}
</script>
</head>
<body>
<iframe name="iframe_a" onload="pop();"></iframe>
Go!
</body>
</html>
Using inline attribute on iframe seems to fix this issue in IE8:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
function onIframeLoad(iframe) {
if(iframe.src) {
alert('Thanks for the visit!');
}
}
function onLinkClick(url) {
document.getElementById('iframe_a').src = url;
}
</script>
</head>
<body>
<iframe id="iframe_a" onload="onIframeLoad(this);"></iframe>
Go!
</body>
</html>
update by request:
You should try writing more unobtrusive javascript. Writing code in such way may prevent you from such strange bugs in IE.
<!DOCTYPE html>
<html>
<body>
<iframe id="display-frame"></iframe>
Go!
<script>
window.onload = function() {
var iframe = document.getElementById('display-frame'),
link = document.getElementsByTagName('a')[0];
// load handler
function onIframeLoad() {
alert('Thanks for the visit!');
}
// event handlers
if(iframe.addEventListener) iframe.addEventListener('load', onIframeLoad, false);
else if(iframe.attachEvent) iframe.attachEvent('onload', onIframeLoad);
link.onclick = function() {
iframe.src = this.href;
return false;
}
};
</script>
</body>
</html>
It seems you can't add a load listener to an iFrame in IE using the DOM property once the page has loaded.
But you can use attachEvent, so:
function on_iframe_load() {
function foo() {
alert('Thanks for the visit!');
};
var el = document.getElementById('iframe_a');
if (el.attachEvent) {
el.attachEvent('onload',foo);
} else if (el.addEventListener) {
el.addEventListener('load', 'foo', false);
}
}
I was testing in IE 6 and reversed the usual test order so that attachEvent is used in preference to addEventListener. You may want to test more recent versions of IE to see if the opposite order works and also test other IE–like browsers such as Opera.
Edit
Modified the code after testing (silly me) to use addEventListener. Here's something that works in IE and others:
function on_iframe_load() {
function foo() {
alert('Thanks for the visit!');
};
var el = document.getElementById('iframe_a');
if (el.attachEvent) {
el.attachEvent('onload',foo);
} else {
el.onload = foo;
}
}
And if you use an onload attribute in the markup, you don't need to add the listener using script.
It works :)
tested on IE8, ff, chrome
var iframe = document.getElementById('iframeid');
if (iframe .attachEvent) {
iframe .attachEvent('onload',alert("IE Iframe loaded"));
} else {
iframe .onload = alert("Other than IE Iframe loaded");
}
Just use jquery:
$(iframe).bind( 'load', function(){} );
Related
I have a chrome extension that injects javascript code into a webpage like so
if (document.readyState === "complete") {
const html = `
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
console.log(location.href);
function doStuff() {
console.log("do stuff");
}
console.log("onload");
window.onload = function () {
console.log("WINDOW LOADED");
doStuff();
}
</script>
</body>
</html>
`;
document.write(html);
}
However, after I navigate to the page and the extension injects the javascript, I can see in the console that it does log location.href and onload, but the window.onload does not trigger, and I do not see WINDOW LOADED in the console, nor is doStuff() called.
I have also tried using
window.addEventListener('load', (event) => {
console.log('page is fully loaded');
});
as well as
document.addEventListener('DOMContentLoaded', doStuff);
to no avail.
Any help would be appreciated, I have not been able to find anything that works.
I managed to fix this by including at the top of my <script>
setTimeout(() => {
let evt = document.createEvent('Event');
evt.initEvent('load', false, false);
window.dispatchEvent(evt);
}, 300);
And this now causes window.onload to trigger. hope this helps anyone with the same issue
My web page has following javascript
function LoadPDF(filename)
{
var loc = filename;
document.getElementById("pdf").setAttribute("src", loc);
if (window.addEventListener) {
document.getElementById("pdf").addEventListener("load", LoadPrint, false);
}
else if (window.attachEvent) {
document.getElementById("pdf").attachEvent("onload", LoadPrint);
}
else {
document.getElementById("pdf").onload = LoadPrint;
}
}
function LoadPrint() {
alert('fired!');
if (document.getElementById("pdf").src !== "") {
var frm = document.getElementById("pdf");
frm.contentDocument.getElementById("pdf").contentWindow.print();
}
}
The LoadPDF is called from code behind. "pdf" is my iframe. When the pdf is loaded into the iframe I want to call LoadPrint. But the trouble is in IE 11 its never called.
Can anyone please help?
This is an IE11 bug, which MS refuses to fix because they consider it a feature bug and they no longer fix that kind of bugs for old browser versions.
A workaround to this bug, is to load the pdf file inside an other page iframe and then load that page inside your iframe. A simple javascript pdf loader with a file argument:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF Loader</title>
<style type="text/css">
html, body {
border:0;
margin:0;
height:100%;
overflow-y:hidden;
}
#pdf {
border:0;
margin:0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<iframe id="pdf"></iframe>
<script type="text/javascript">
function getParameterByName(name) {
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
var pdf = getParameterByName('pdf');
document.getElementById('pdf').setAttribute('src', pdf);
</script>
</body>
</html>
You can use it with the <filename.html>?pdf=<pdf_file_to_load>.
Then you just change your code to load the pdf file through that loader like this:
function LoadPDF(filename)
{
var loc = "pdf-loader.html?pdf="+filename;
document.getElementById("pdf").setAttribute("src", loc);
if (window.addEventListener) {
document.getElementById("pdf").addEventListener("load", LoadPrint, false);
}
else if (window.attachEvent) {
document.getElementById("pdf").attachEvent("onload", LoadPrint);
}
else {
document.getElementById("pdf").onload = LoadPrint;
}
}
function LoadPrint() {
alert('fired!');
}
LoadPDF('http://www.pdf995.com/samples/pdf.pdf');
Now the LoadPrint function is called on iframe load event even on IE11.
Here is my working example you can even test with IE11: http://zikro.gr/dbg/html/ie11-iframe-pdf/
Here you can see a screen capture with the 10MB PDF loading and only after it finish loading it fires the load event and alerts the message:
I don't know if this is your specific issue in this instance, but make sure you bind your listeners to the element before you assign it's src attribute. If the item is in cache it is possible for the load event to fire before you bind to it, thus missing it entirely.
Here is my simple code
function goto() {
/* Some code to be executed */
if (a == "1")
location.href = "http://www.google.com";
else
location.href = "http://www.example.com";
}
And here is html
Hello
this works perfectly fine when i click normally but if i right click it and open in a new tab it doesn't execute.
try this:
Hello
function goto() {
/* Some code to be executed */
window.open("http://www.google.com");
}
if you want to open in new tab on mouse right click,
Hello
hit mouse right click and open in new tab
OR
u can try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
function goto() {
window.location = "http://www.google.com";
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementsByTagName('a')[0].addEventListener('contextmenu', function (ev) {
ev.stopPropagation();
ev.preventDefault();
goto();
});
document.getElementsByTagName('a')[0].addEventListener('click', function (ev) {
goto();
});
}, false)
</script>
</head>
<body>
Hello
</body>
</html>
Try something like this:
Hello
<script>
document.getElementById('myId').addEventListener('contextmenu', function(ev){
gotoFunc(ev);
});
function gotoFunc(ev){
//run this when right clicked over #myId element
}
</script>
do it like this:
function changeDest(elem) {
/* Some code to be executed */
if (a == "1")
elem.href = "http://www.google.com";
else
elem.href = "http://www.example.com";
}
Hello
you can instead use Hello
This should do the trick. i.e adding the url to the href of the anchor tag
If a website is loaded into an iframe, what code do I need to put on the child page of that iFrame to break out of the iFrame and load that page as the top document or reidrect to that page
Just found the code
<script>
if(window.top !== window.self){
window.top.location.href = "http://www.blah.com";
}
</script>
Even better code:
<style> html{display : none ; } </style>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
Code Example below:
<!DOCTYPE html>
<html lang="en">
<head>
blah
</head>
<body>
<iframe src="www.blah.com"></iframe>
</body>
</html>
What JQuery or javascript do I need to put on (in this example) www.blah.com so it breaks out of the iframe and www.blah.com is directly shown to the user?
What you're looking for is called a Framekiller
Here's the suggested implementation from that article:
<style> html{display : none ; } </style>
<script>
if( self == top ) {
document.documentElement.style.display = 'block' ;
} else {
top.location = self.location ;
}
</script>
This should work:-
<script type="text/javascript">
if (window!=top){top.location.href=location.href;}
</script>
window.top.location.href = "http://blah.com/";
As mentioned here (with a fuller explanation):
Redirect parent window from an iframe action
If you are using a link setting target="_top" attribute probably would do the job.
My goal is to have a parent page change the src of an iframe from blank to its proper url (as to utilize an onload handler in the iframe at a given point, but that's beside the point) and then manipulate the iframe's contents. However, javascript seems oblivious to any elements of an iframe that aren't on its src when the DOM loads. Is there any way around this?
The setTimeouts are intended to allow the DOM and iframe to load.
edit:fixed some stuff.
Here's the containing page:
<html><head>
<script type="text/javascript">
var done = false;
var theIframe;
window.onload = function () {
setTimeout('stuff()', 2000);
clearTimeout('stuff()');
}
function stuff() {
if (!done) {
theIframe = window.myiframe;
theIframe.src = 'http://localhost/TestStuff/redirectIframe.jsp';
done = true;
stuff();
} else {
theIframe.setMe = true;
}
}
</script>
</head>
<body>
<iframe src="" width="500" height="500" id="myiframe" name="myiframe">
</iframe>
</body>
And here's the iframe:
<html>
<head>
<script type="text/javascript">
var setMe = false;
window.onload = setInterval('checker()', 1000);
function checker() {
alert('hi');
if (setMe) {
window.onload = null;
top.location = 'http://www.google.com';
alert('foundit');
} else alert('a');
}
</script>
</head>
<body></body>
</html>
Any ideas?
In this piece of code:
theIframe.src = ...;
stuff();
you're calling stuff() immediately, contrary to what you have described, so in fact you're not allowing any time for the page to load. Maybe you're confused about how setTimeout works: it just schedules a single execution after the specified time, it doesn't automatically delay all calls to a function.
Also, you can use clearTimeout only with a previous ID returned by setTimeout, not with code as you have now.
Try something like this:
window.onload = function() {
loadFrame();
}
function loadFrame() {
theIframe = ...;
theIframe.src = ...;
setTimeout(setSomething, 2000);
}
function setSomething() {
theIframe.setMe = true;
}