jQuery set iFrame onLoad attribute - javascript

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.

Related

How to execute a jQuery function on click of an anchor tag which is placed inside an Iframe

I have a web page in my application where I have an iframe loaded on the Page load.
The iframe displays a custom document which is created in our application. The iframe name is generated on the fly and the contents is loaded by a custom Javascript framework.
The document has two main vertical sections.
The first vertical section has page list which is displayed to the user so that user can navigate to nth page.
<iframe id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0">
<div class="containerFull">
<div class="allPages" id="allPages">
<a class="pagenumber_001" href="/document/2339389/15031550">Page 1</a>
<a class="pagenumber_002" href="/document/2339389/15031550">Page 2</a>
<a class="pagenumber_003" href="/document/2339389/15031550">Page 3</a>
</div>
<div id="pagesArea">
<div class="docPage" id="page_body_001">
<div id="docPageSection-001-1">
PAGE CONTENT
</div>
</div>
</div>
</div>
</iframe>
On page load, The iframe will be displaying the page 1.
By clicking the anchor tag, user can navigate to any page. On click of the anchor tag, the iframe is reloaded with the page details which is sent to back end.
Since some of the pages were bigger in width and user doesn't want the horizontal scroll to be present, I was adjusting the width of the iframe container and the two divs so to make them appear properly on the window.
`
<script src="adjust_doc_view.js"></script>
// the above script contains a jQuery function called updateView which basically
// has css related jQuery statements.
jQuery(window).on('load', function () {
setTimeout(updateView, 100); // timeout is used to wait for the iframe to load completely
});
`
The Issue which I am facing is the updateView is triggered only once on the page load. On all subsequent reload of Iframe, the updateView is not called. That is because I am not loading the whole page. I have other divs which are above the iframe which are constant. Let me know how to trigger updateView on every reload of iframe contents.
I tried adding the onclick function on anchor click event, but it works only once. I am not sure why.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery(window).on('load', function () {
// use setTimeout() to execute
// Setting the timeout to zero as no delay is experienced in this page.
setTimeout(updateView, 0);
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("a[class^='pagenumber']").on('click', function() {
setTimeout(updateView, 1000);
});
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("div[id^='docPageSection']").on('load', function() {
setTimeout(updateView, 1000);
});
});
Please help me out here. Please correct me if I am doing something wrong.
Thanks in advance.
How about adding the onload attribute to your iframe and calling updateView() from there?
<iframe onload="setTimeout(function() { updateView(); }, 1000);" id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0"></iframe>
You could use the ajaxComplete inside the iframe to trigger your update:
$(function() {
// iframe in main page
$('iframe').on('load', function() {
updateView()// first load update
// reference to window and document inside frame
var win = this.contentWindow || this,
doc = this.contentDocument || this.contentWindow.document;
// have to use iframe version of jQuery
win.$(doc).ajaxComplete(function(event, xhr, settings) {
// fires every time an ajax request completes in iframe
updateView()
});
});
});
DEMO

force a frame to open new window in the top frame

For example:
<html>
......
<iframe name="first">
<html>
......
<iframe name="second"></iframe>
<iframe name="third"></iframe>
......
</html>
</iframe>
......
</html>
I want the third or second iframe to open the link which is clicked, open in the first frame. Target attribute not work.
It is possible ? if yes, then how to do it ?
You can control where an iframe opens up with the target attribute on the <a> tag:
http://www.w3schools.com/tags/att_a_target.asp
_blank: Opens the linked document in a new window or tab
_self: Opens the linked document in the same frame as it was clicked (this is default)
_parent: Opens the linked document in the parent frame
_top: Opens the linked document in the full body of the window
framename: Opens the linked document in a named frame
var WindowSrc = $("#second").attr("src");
window.open(WindowSrc);
Note: You will need to ensure that pop ups are allowed if you wish to open a new window.

how to use popup in iframe that covers the whole page which contains the iframe?

I want to create an iframe of size 200X200. and i want to use a popup code in it. but i am facing a problem,
currently the pop up is showing when i click on the space 200x200 but i want the popup to be displayed when i click on the page which have the iframe. (not only the iframe area but the whole page)
whenever i place the iframe on a page i want the popup to be apear as it's the popup of the original page not the iframe only.
Any one have any idea how i can perform this action with html, javascript or jquery?
Thanks
Use autoresize javascript code
<script type="Text/JavaScript" language="JavaScript">
<!--
function resize_iframe()
{
var height=window.innerWidth;//Firefox
if (document.body.clientHeight)
{
height=document.body.clientHeight;//IE
}
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("cam").style.height=parseInt(height-
document.getElementById("cam").offsetTop-8)+"px";
}
// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;
//Instead of using this you can use:
// <BODY onresize="resize_iframe()">
</script>
</head>
<body>
<iframe id="cam" width="100%" scrolling="yes" src="http://www.your_page.com" onload="resize_iframe()">
</iframe>
</body>
this will help for you
Make the pop-up call when the user click in an element of the body, not only the frame.
If you provide your JavaScript & HTML code, I can help you more.

Iframe onpagechange event?

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

How to force an iFrame to reload once it loads

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.

Categories