As we all know clicking a normal link in an iframe opens up the respective page within the iframe. Now my question is whether there is a way to react to the new page being opened on the page the iframe is within.
Like an iframe.onpagechange event that fires whenever the page within the iframe changes e.g. when a link is clicked.
Is there such event? And if not do you have any suggestions for a possible approach?
In that case then no it's not possible, not reliably across all browsers.
In the more modern browsers they do allow you to use an 'onload' event on the iframe tag itself, and this triggers each time the iframe reloads - i.e. when a link is clicked. However, this isn't supported on older browsers and there are many websites out there that are designed to break out of frames. If the site breaks out of your frame, you get no load event triggered. On top of this, because you are dealing with an iframe outside of your control/domain that is about all you can do -- tell that the frame has loaded -- everything else will be blocked from your access.
<iframe onload="iframeLoaded()" src="..." />
Or the better approach would be:
<iframe id="frame" src="..." />
<script>
window.onload = function(){
document.getElementById('frame').addEventListener('load', iframeLoaded);
}
</script>
As i've said in my comment, give the html target attribute a chance. Use it in context with javascripts open function.
Iframe: HTML
Link
Iframe: JS
$('a').on('click', function() {
var target = this.href;
window.open(target, "_parent");
return false;
});
Page: HTML
<iframe src="http://fiddle.jshell.net/CGuHR/13/show"></iframe>
Fiddle
Related
How can I detect a link click inside a iFrame?
The Frame source changes a lot of times and I need to detect all link click inside the iFrame.
I try that already: Javascript - click link in iframe
JS:
$("#Source a").click();
HTML:
<iframe src="" name="Source" id="Source" scrolling="" frameborder="0" title="Anzeigebereich"></iframe>
you need to use .contents() http://api.jquery.com/contents/
$('#Source').on('load', function(){
$(this).contents().find('body').on('click', 'a', function(e){
e.preventDefault(e);//stop normal navigation
//your code here
});
});
If you trying to catch an event or do whatever inside the iframe from the oustide document, it isn't possible, the iframe is different context (different document) and this is not alowed. You can check a similar question here
use post message, for communicaton between frames, also support different domains
post message doc
I have an iframe with the id=phramecomp which contains several elements such as links and button.Let us suppose i have a hyperlink inside iframe with the id=donuts.I want to set a click event for that hyperlink.How do i achieve that ?
This might be duplication of many questions but still anyone could tell me how to do this one ?
Note:
iframe is on other php file by the name orderonlinelist.php
I have included this iframe inside orderonline.php file and i am writing my click function here.
<iframe src="http://localhost/orderonline_list.php" name="phramecomp" id="phramecomp" frameborder="0" scrolling="yes" ></iframe>
This is what i have included in my orderonline.php file.
you can detect click events inside iframe
Lets suppose you an iframe having id="Myframe" and a image in you iframe having id "Myimage"
so for detecting click events inside Myframe in image Myimage you can
$('#Myframe').loads(function()
{
var frame=$('#Myframe').contents();
frame.find('#Myimage').click(function(){
//do anything
});
});
Not too familiar with javascript. I have done some searching and am having trouble implementing this code into my current project.
Basically want to refresh the iframe when the screen is clicked. I currently have this code:
document.getElementById('').contentWindow.location.reload(true);
I want to integrate it into this code:
$(".launch").loadthis({ direction: "left", connect: true });
How would I go about this?
There are some issues that are unclear in your question.
1) What do you mean when you say "Screen is clicked" ?
Anywhere in the open browser window?
Anywhere in the open browser window including the iframe?
2) Is your IFRAME 100% of the width and height of the browser window?
Regardless, below I break down your problem and hopefully give you a solution...
How do we refresh a webpage?
You can refresh a webpage using:
location.reload(true);
How do we refresh an iframe?
You may refresh an IFRAME using the code here:
Refresh an iframe
<iframe id="myiframe" src="http://google.com"></iframe>
document.getElementById("myiframe").src = "http://www.google.com?"+(+new Date());
How do we detect the click?
You can use the solution here:
https://stackoverflow.com/a/2622026/1688441
document.onclick= function(event) {
// Compensate for IE<9's non-standard event model
//
if (event===undefined) event= window.event;
var target= 'target' in event? event.target : event.srcElement;
alert('clicked on '+target.tagName);
};
Remaining issues:
What happens if user clicks within IFRAME?
If the user clicks within the IFRAME, and we control the code of the IFRAME we can have a click listener within the HTML/JAVASCRIPT of the IFRAME and trigger a refresh.
If we have different domains, due to security reasons there is not much that can be done.
window.addEventListeneder("click", windowClickHandler);
function windowClickHandler(event) {
document.getElementById('iframe_id').contentWindow.location.reload();
}
Also see this question;
I have numerous iframes that load specific content on my pages. Both the parent and iframe are on the same domain.
I have a scrollbar inside the iframe that doesn't seem to load correctly in all browsers. But when I refresh the iframe it loads perfect. I have no idea why it does this.
I have used the meta refresh, which works but I don't want the page to refresh constantly, just once.
The solution I'm looking for will reload the iFrame content after the iFrame is opened, with a minimal delay.
Edit
I realized that my page loads all of my iframes when the index is loaded. The iframes appear in a jQuery overlay, which is also loaded but visibility:hidden until called. So on this call is when I would want the iframe to be reloaded.
Could anyone help me come up with a Javascript function that reloads the iFrame when I click the link to the iFrame? I've gotten close but I know nothing about js and I keep falling short. I have a function that reloads the page, but I can't figure out how to get it called just once.
I have this so far:
<script type="text/javascript">
var pl;
var change;
pl=1;
function ifr() {
if (pl=1) {
document.location.reload([true]);
alert("Page Reloaded!");
change=1;
return change;
}
change+pl;
}
So basically it uses the document.location.reload which works to reload the page. I'm trying to then make pl change to something other than 1 so the function doesnt run again. I've been calling this JS from the body with onLoad.
All the leads on this went dead, but I did find a code snippet that worked. Not written by me, and I don't remember where it came from. Just posting to help someone should they ever have the same question.
<div class="overlay-content"> //Content container needed for CSS Styling
<div id="Reloader">
//iFrame will be reloaded into this div
</div>
//Script to reload the iframe when the page loads
<script>
function aboutReload() {
$("#Reloader").html('<iframe id="Reloader" height="355px" width="830px" scrolling="no" frameborder="0" src="about.html"></iframe>');
}
</script>
</div>
Basically just loads the iFrame source when the window with the iFrame opens, as opposed to the iFrame loading when the original page loads.
Beyond the scope of the original question, however this jQuery snippit works with cross domain iframe elements where the contentDocument.location.reload(true) method won't due to sandboxing.
//assumes 'this' is the iframe you want to reload.
$(this).replaceWith($(this).clone()); //Force a reload
Basically it replaces the whole iframe element with a copy of itself. We're using it to force resize embedded 3rd party "dumb" widgets like video players that don't notice when their size changes.
On the iframe element itself, set an onload:
iframe.onload = function() {this.contentWindow.location.reload(); this.onload = null;};
(Only works if the iframe's location is in the same domain as the main page)
Here's a complete solution to the original question:
<iframe onload="reloadOnce(this)" src="test2.html"></iframe>
<script>
var iframeLoadCount = 0;
function reloadOnce(iframe) {
iframeLoadCount ++;
if (iframeLoadCount <= 1) {
iframe.contentWindow.location.reload();
console.log("reload()");
}
}
</script>
The updated question is not really clear (what's "the link to the iFrame" and where is it in your snippet?), but you have a few issues with the code:
"calling this JS from the body with onLoad", assuming you mean an iframe's body, means the variable you're hoping to use to avoid infinite reloading will get clobbered along with the rest of the iframe's page when it's reloaded. You need to either load a slightly different URL in the iframe (and check the URL on iframe's onload before reloading) or put the flag variable in the outer page (and access it with parent.variableName - that should work I think)
if (pl=1) { should use ==, as = is always an assignment.
change+pl; has no effect.
I need to trigger a function when the iframe loads a second time (the user clicks some link in the iframe). When the iframe page changes I can set the window location to the iframe src.
What I thought would be best is to set an onLoad attribute on the iframe element after the first load. I guess I would need the live event to tell when the iframe has been created, since it's dynamic.
This is what I had in mind:
$(document).ready(function() {
$('#tenant_login').fancybox({type:'iframe'});
$('#tenant_login').click(function() {
$('#fancybox-frame').attr('onload', function() {
window.location = $('#fancybox-iframe').attr('src');
});
});
});
If it matters the iframe is not cross domain.
$("#fancybox-iframe").load(function(){
window.location = $('#fancybox-iframe').attr('src');
});
This will allow you to redirect the parent window when the iframe loads a different page.
If you have control of the iframe content, as I did setting a target="_top" attribute on the hyperlink means the browser will open the link in the browser window rather than the iframe.
Main document:
<html>
<body>
<h1>The Main Page</h1>
<iframe src="myIframe.html" />
</body>
<html>
Iframe document:
<h2>The IFRAME</h2>
<a href="something.html" target="_top" >
This will open in the browser window rather than any iframe it exists in.
</a>
If you can't put target="_top" on the links of the iframe DOM you will need to capture the click events with javascript from the parent DOM.