I am using ImageFlow 9. I have an ImageFlow scroller script added in the Iframe. I want to have the images opened outside the iframe that is on the Parent page. Right now it is opening the images in the Iframe itself. What changes should I do and in which file?
There is a .js file that has a function as below -
image.onclick = function() { document.location = this.url; }
Do I need to make the changes here or in the actual script that uses this code-
<img src="reflect.php?img=img/large1.jpg" longdesc="javascript:myLightbox.start('img/large1.jpg|Image 1');" alt="Image 1" />
Create a JavaScript function on the parent page, and call that from the iFrame.
Something like
function openImage(url){
// do your image handling stuff here
}
From the iFrame call the function:
parent.openImage(url);
ps: I recommend not using iFrames at all unless there is no other way (which most of the time is not the case)
Related
I am using the following JavaScript (in the script tag in head) to modify an iframe's src when a link is clicked.
function switchView() {
document.getElementById("project-view").src = 'projects/3dpool.html';
}
My iframe is written as
<iframe id="project-view" src="projects/fallingballs.html" onload="resizeIframe(this);" scrolling="no"></iframe>
The link that changes the iframe is:
3D Pool
Adding a log statement like document.getElementById("project-view").src after the src change shows that the src has actually changed but no changes show up.
I have tried removing the unload tag from the iframe but it doesn't help.
Typing out the code in the switchView() function in the web console works
Change your link to look like the following:
3D Pool
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.
According to this answer:
Invoking JavaScript code in an iframe from the parent page
I have an iframe that loads a page that has a div with the id flash_container
<iframe src="http://www.remote.com/a.html" id="iframeID">
I placed this code on my parent page (the page that loads the iframe) but it doesn't seem to work:
document.getElementById('iframeID').contentWindow.targetFunction();
function targetFunction() {
var el = document.getElementById('flash_container');
el.style.zoom = 0.7;
el.style.MozTransform = 'scale(0.7)';
el.style.WebkitTransform = 'scale(0.7)';
}
What I'm trying to do is to zoom-out the inner page inside the iframe from the parent page.
It's impossible to say for certain what's wrong, but I have some ideas you might want to look into.
Make sure that the iframe is loaded. Trying to do something inside a frame that hasn't finished loading clearly won't work
Are you sure that you don't have cross-domain problems. You cannot manipulate the contents of a cross-domain iframe.
Actually you could, if both side (your page and the page in the iframe) agree on sharing information, you could use message passsing. See https://stackoverflow.com/a/7938270/1571709
Howdy guys, im having trouble finding help on creating a callback in certain situations.
I have a piece of code which loads a links page in to an iframe and then changes the scr if another link is pressed.
$(".iframe").hide();
$(".lnk").click(function(){
$(".iframe").show('slow')
;})
;
$(".frmclose").click(function(){
$(".iframe").hide('slow')
;})
;
The above runs within (document).ready
below is outside of this (for some reason it does not work on the inside)
function changeIframeSrc(id, url) {
if (!document.getElementById) return;
var el = document.getElementById(id);
if (el && el.src) {el.src = url;return false;}return true;}
the link :
google
prior to this i have the div in which the iframe is in become unhidden. I also have a button within that div which hides the div + iframe.
What im having problems with is once the iframe has been opened and then closed via the div link if it is re-opened by clicking a different link the iframe unhides to display the old page then changes. But what i want is for the frame to load the new page(while hidden) then unhide to display it. I thought of using a callback after the iframe src change but i cant see where i would implement it.
Example of it happening
(click the GDPH button to see the links for the iframe)
Any thoughts or help appreciated.
Regards
B Stoner
I think that all you need to do is clear the src of the <iframe> when it is closed. That will clear the page so that next time you show the iFrame it will start out blank again.
I made a small demo of this functionality that uses the 3 links from your page as an example. The <iframe> starts hidden (by CSS) and each link will show the <iframe> and then load the remote site. I added a close iframe link to simulate the close link you have under the <iframe> on your site.
Hope this helps!
Edit: Updated the demo link to include the callback part. Somehow missed that when I read the question!
Edit 2: Your changeIframeSrc function was not working was because it was defined inside the jQuery anonymous function and is a closure. See calling Jquery function from javascript
I would catch the .load() event for the iframe, this will fire after the document has been loaded in to the iframe.
$(".iframe").load(function { /* code to run when iframe is loaded */ });
i'm working in an application
i have to change some css files in the page and some images (reloading them from the server) using javascript , but it takes some time and it's obvious that page items are reloaded slowly -in slow connections- , so is it possible to do this processing in the background and then display the whole page when ready ??
AFAIU you can put it in a hidden IFRAME. In this IFRAME you handle onLoad event. However, this won't fasten up loading process, it will only hide it from user.
Examle:
Let's say that you have a long-lasting JavaScript method named longLoad() . You should put it in a separate HTML page named e.g. hidden.html.
<html>
<script type="text/javascript">
function longLoad() // javascript method here...
{
/// some code here...
}
</script>
<body onLoad="longLoad();">
</body>
</html>
Your main page (the one that is actually visible in browser) may look like this:
<html>
<body>
....
.... content
....
<iframe src ="hidden.html" width="100%" height="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
As you can see IFRAME height is set to 0 making it invisible on the page- that's why I called it hidden. However, when the user loads the page, the hidden IFRAME will be loaded too. And its onLoad event handler will also be called. And it is possible to access and modify content of the main page from that JavaScript event handler (through DOM trees).
PS. The above code was written from memory, however the presented solution works. It was used long before AJAX came into popularity.
You can hide the whole page while your work is going on, or you could load your CSS and images and only do the updates to the DOM when all your materials have made it to the client.
You can load an image by creating a new Image object:
var img = new Image();
img.onload = function() { /* do something */ };
img.src = "/new/image.png";
The "onload" function will run when the client has received the image file and it's ready to be displayed. Thus you could arrange to load up images that way, and use the "load" handlers to track when they're ready. When all of them are, then you can update the DOM and it should go very quickly.