|
JavaScript - Display Url Of Iframe And Refresh Upon Reload
Hello Everyone,
I am having trouble with a script that displays the url of an iframe. On this page, I have a single iframe and want to display the url of the iframe in a div. It works upon initial loading, but the url does not change when a link within the iframe is clicked and a new iframe page loads within the frame. My users need the ability to determine and directly link/view the iframe url. Here is the script Code: <iframe id="mainFrame" name="mainFrame" class="inner-center" frameborder="0" scrolling="auto" width="100%" height="400"
src="whats_new.htm"></iframe>
<p>
<div class="footer"><script type="text/javascript" language="JavaScript">
<!--document.write('<input type="text" style="width:100%; " ');-->
document.write( document.getElementById('mainFrame').src);
</script>
</div>
I am a js novice and trying to figure out what to research and implement. Can you reload the content in the div? do I want to look at cross-frame scripting? Any help would be greatly appreciated. Best regards, Eiger Similar TutorialsWhat I would like to do is have a page with a dropdown menu, and depending on which option the user chooses from the dropdown, reload the page and display a particular iframe below the dropdown, based on the users choice. Also, a default iframe would load (the one connected to the default choice in the select box). Hopefully that makes sense. I was trying to make this work with PHP (without having the user having to click a submit button) but I couldn't find a way to make it happen.
Hello, I need some script to force the browser to reload/refresh when a page is reached from the back button. EG You're on page A -> You click a link onto page B -> You Press Browser back to go onto Page A, it has old content that requires a reload. Now, my page is currently php so I won't bother with my code here as I am looking for any solution (I have also posted in php forum). Any JS solution that will trigger a reload on browser back is appreciated. I have tried a few ideas, most work in Chrome, IE always works, Firefox 4 and Opera 11 wont reload, simply fetching from cache I believe. Thanks. Is there a difference between right clicking an iframe and reloading post reponse vs. using javascript to reload the frame? So far, the javascript route hasn't worked for me. [some context] I am writing a little bookmarklet to help me with the online registrations at my school. Here is the setup. Load up a page on the domain. Remove all body elements. Insert an iframe. Set iframe to page for class roster search. (in iframe on school search page) Select class search options, POST the form data, and view results in frame. *This works perfectly, but I need to have it refresh results every minute or so. When I use frame.contentDocument.location.reload(true); the frame loses the post data or something and the page is broken. BUT when I just right click on the frame and select "reload frame" it works perfectly. Whats the deal here? What is the difference between rightclicking the frame and refreshing it like that vs. using javascript to reload the frame? PS: using chrome Trying to use js to reload an iframe so that it can do a query again and show a live update to the given number. I'm doing: <code> <iframe id="ifrm" name="ifrm" onload="ifrm.window.location.reload();" src="url" width="400px" height="100px" scrolling="no" frameborder="0"> Sorry, your browser doesn't support iframes. </iframe> </code> Any ideas? Hi I have a page with 3 iFrames, showing different content. iFrame1: Here is a navigation php page. Click on a menu item and it loads a php page in iFrame2 iFrame2: Here is a list of items from a database. iFrame3: I load 3 different php pages here. (A) is the main showing page. (B) and (C) is a record manipulation page, that does some editing in the database and then redirects to (A). When the (A) php page loads, it should reload iFrame2 I have tried to put something like: <body onLoad=parent.location.reload()> and put it on the (A) php page. This will reload the entire page, which works. However, it results in a loop of reloads, as the (A) iFrame file will load with the entire page reload... So, I was looking for the right code to put, like onLoad=iFrame2.location.reload() However, I can't seem to find the correct code, so I hope any of you can help me... Okay, I assume many will think I must have missed the previous thread, but I did look at it, and I am not sure if that one comes close to answering my idea here. I was looking at NHL.com, and I noticed the scoreboard changed without me reloading the page. So... I looked at the code, and this is where I got completely lost: Code: <div id="scoreboard">
<style type="text/css">
#masthead #richMedia, #scoreboard { margin-left: 0px; width: 817px; }
</style> <script src="/js/hdr_scoreboard.js?v=6" language="JavaScript" type="text/javascript"></script> <script language="JavaScript" type="text/javascript">
var dataSource = "http://live.nhle.com/GameData/PlayoffScoreboard.jsonp?loadScoreboard=?";
jQuery(document).ready(function() { initScoreboard(5, 'cc0000', '000000'); });
</script>
What I am interested in doing is reloading an iframe that has a total visitor counter. That way say every 5 minutes or so, it gets updated without any interaction needed. I tried the meta refresh on the iframe's target page long ago, but that forced a reload on the main page as well, and I am totally against doing that. So, does anyone here have any tips to provide? I have a page with 2 iframes how can I make it that if they submit on the first iframe - it should refresh the second iframe? Well first off all I would appricate any help that you could give me because I've been looking all over the internet for the solution without any result. So off to my problem, I made this text-based online game and let's say the user does a crime, he did this crime 17:04:30 and has to wait till 17:06:30 before he can do a crime again (this is printed in the MySQL database). Getting the value from the database and changing it into the right format mm:ss is no problem. The problem comes to when its about refreshing... I've tried meta refresh and javascript location.refresh with good results, i sat the timer to 1 sec and it refreshed. The problem comes to when it refresh the mouse cursor and the tab (in firefox and chrome) gets that look, like when u refresh a page normally u can see an hourglass and all that. Is there anyway to disable that? And i think it really slows the browser down after a while (because after like 30 min or more firefox used 600 mb of my RAM). So yeah here's my Iframe code: Code: print <<<ENDHTML <IFrame Src= "right_timer.php" Scrolling=No Frameborder=0 Marginheight=0 Marginwidth=0 Width=100% Height=160> <p>Your browser does not support iframes.</p> </iframe> Also here's the right_timer.php: Code: <?php
include("config.php");
$dbres = mysql_query("SELECT *,UNIX_TIMESTAMP(`crime`) AS `crime` FROM `users` WHERE `login`='{$_SESSION['login']}'");
$data = mysql_fetch_object($dbres);
if(! check_login()) {
print"<link rel=stylesheet type=text/css href=style.css>";exit;
}
if ($data->status == dead) { print"<link rel=stylesheet type=text/css href=style.css>";exit; }
?>
<html>
<head>
<meta http-equiv="refresh" content="1">
</head>
<body>
<?php
$dbres = mysql_query("SELECT * FROM `users` WHERE `activated`='1'");
$users= mysql_num_rows($dbres);
$dbres = mysql_query("SELECT * FROM `users` WHERE `status`='alive' AND `activated`='1'");
$levend = mysql_num_rows($dbres);
$dbres = mysql_query("SELECT * FROM `users` WHERE UNIX_TIMESTAMP(NOW())-UNIX_TIMESTAMP(`online`) < 300");
$online = mysql_num_rows($dbres);
$dbres = mysql_query("SELECT * FROM `users`");
while($blah = mysql_fetch_object($dbres)){
$time = time();
$crime = gmdate('i:s',($data->crime - $time));
if (($data->crime - $time) < 0) { $crime = Now; }
}
print <<<ENDHTML
<tr><td>Crime {$crime}</td></tr>
ENDHTML;
?>
</body>
</html>
This works on one of our other sites, but today I noticed this site is having a problem, its just not refreshing at all... here is the code.. (what is used on the iframe) Code: <iframe id="ad1" whats in the header (besides the including of the js file) Code: <script type="text/javascript">
var imageIntervals={};
var imageLimit={};
var imageCount={};
</script>
and the actual script Code: function toggleImage(id) {if(imageCount[id]<imageLimit[id]||imageLimit[id]<0) {var img=document.getElementById(id);img.src=img.src;imageCount[id]++;}else {clearInterval(imageIntervals[id]);}}
function setImageInterval(id, ms, limit) {imageIntervals[id]=setInterval("toggleImage('"+id+"')", ms);imageLimit[id]=(limit!==undefined?limit:-1);imageCount[id]=0;}
/* IFERAME RATES */
window.onload=function() {
setImageInterval("ad1", 72000, 4);
setImageInterval("ad2", 60000, 4);
setImageInterval("ad3", 66000, 4);
setImageInterval("ad4", 72000, 4);
setImageInterval("ad5", 72000, 4);
setImageInterval("ad6", 76000, 4);
}
This should work, but its not so trying to see if you can see something I dont. If theres a better iframe refresh script out there that can do different intervals, please share. Thanks hi there. i have a classic asp page that is using the winhttprequest object to get the contents of website from a different server. Then i modify the html i get to suit my needs.. save it to a file, and then finally, i display this stuff in an IFRAME. (i wrapped a div tag around the iframe so technically, i'm doing something like: "divtabframe.innerHTML = '<IFRAME SRC='myserver/somepage.html'></IFRAME>) My problem is that when i refresh the main page, i want the iframe to also display the latest data. It does get the latest data from the external site and its saved in "somepage.html". But the iframe isn't updated unless i explicitly right-click inside the frame and manually select refresh. I have added a <meta http-equiv="refresh" content="30"> line to make it auto refresh on it's own. But the users find it annoying that the page refreshes while they're reading it. It would be ideal if when they refresh the main page, the iframe gets updated too. or i could create a new button too... as long as both pages are updated i did find this solution on a different website: document.getElementById(FrameID).contentDocument.location.reload(true); My page inside the iframe is ultimately "local" so it sounds like the above code should work, but i'm not sure what event would be best to trigger this javascript... and i still need a way to refresh the main page too. thanks. Alright I have an Iframe, and at the end of that Iframe I have set a variable with JS to be equal to TRUE, indicating that the page has run through the script. I then check that the iframe from the parent window for that variable, if it has not been set yet (or does not equal true) it reloads the iframe. The code works fine FF and Opera. However in IE it does not reload the frame if it is not true, and in Chrome it alerts undefined and does not reload the frame. I have tried accessing the frame through the dom and it did not work for me, and i have also tried simply adding a tail to the iframes source with no success. PHP Code: <iframe name="ifrOne" src="iframe.htm" id="ifrOne"></iframe> <script type="text/javascript"> function frameLoad() { var testOne = window.ifrOne.test_var; if(testOne !== "TRUE") { alert(testOne); document.getElementById('ifrOne').contentDocument.location.reload(true); window.frames['ifrOne'].location.reload(true); } } </script> Hi-- I have found a neat trick to refresh an iframe in an html page, but I just need one little twist to make it work just right. I would like to make the iframe content refresh just once, not matter how many times the link is clicked... Right now, I have this in the head: Quote: <script type="text/javascript"> function refreshIframe(el) { var f = document.getElementById(el) var rsrc = f.src f.src="about:blank" f.src=rsrc } </script> And this is the link which, when clicked, refreshes the iframe every time it is clicked: Quote: <a href="#page_7c" onclick="refreshIframe('test'); return false"> "test" is the id of the iframe. I am sure how to do this is really simple, but it escapes me... Many thanks! I am building a webpage to make my life easier at work. In the page i am simply loading 3 different web pages that i use 100% of the time between each other, and since they are little tools and i can fit them all nicely in one. However, i'm having a problem doing it with the most important one. I've included all 3 pages via iframes, but the third page doesn't work and becomes the topmost every time. This is because this web page uses the Javascript code snipset below in their page: ---------------------------------------- if (top.location != self.location) { top.location = self.location.href; } ---------------------------------------- Please advise me if you have any solution for that. Many thanks, Arch, i'm working with a city select option, a hotel select option & an iframe. the hotel select option is populated depending on the chosen city which then updates the iframe src. this is all working fine. the trouble im having is that when the page is refreshed, normal f5 way, the hotel option changes whereas the city option & the iframe src remains the same?? this problem does not occur on a force refresh via control + f5 as then both select options & iframe src revert to their original state. I don't want the city option to change upon a normal page refresh. how do I go about this? below are the city, hotel select options & iframe Code: <form name="hotelslist" id="hotelslist">
<select id="cities" name="cities" onChange="hotel_list(hotelslist.cities.selectedIndex);loadHotel();">
<option value="Baddeck">Baddeck</option>
<option value="Banff">Banff</option>
</select>
<select id="hotelnames" name="hotelnames" onChange="loadHotel();">
<option value="Inverary Resort, Baddeck">Inverary Resort, Baddeck</option>
</select>
</form>
<iframe name="hotelframe" id="hotelframe" src="http://www.google.com" scrolling="no" width="660" height="1000" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe>
below is my javascript functions Code: function loadHotel() {
var destURL = document.hotelslist.hotelnames.options[document.hotelslist.hotelnames.selectedIndex].value;
window.frames["hotelframe"].location = destURL; }
var i;
function hotel_list(i){
var hotelslist = document.getElementById("hotelslist");
hotelslist.hotelnames.options.length=0;
switch(i)
{
case 0: //Baddeck
hotelslist.hotelnames.options[0] =new Option('Inverary Resort, Baddeck','http://www.test0.com');
break;
case 1: //Banff
hotelslist.hotelnames.options[0] =new Option('Banff Caribou Lodge & Spa','http://www.test1.com');
hotelslist.hotelnames.options[1] =new Option('Banff Ptarmigan Inn','http://www.test2.com');
hotelslist.hotelnames.options[2] =new Option('Banff Rocky Mountain Resort','http://www.test3.com');
hotelslist.hotelnames.options[3] =new Option('The Rimrock Resort','http://www.test4.com');
hotelslist.hotelnames.options[4] =new Option('Fairmont Banff Springs','http://www.test5.com/');
break;
}
}
can some one please advise on a cross browser solution? thanks in advance. Omar. Code: window.onload = function()
{
var vIframeUrl;
vIframeUrl= document.getElementById("ifrBDiagram").src;
if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "")
{
document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg";
}
getIframeSize();
}
function getIframeSize()
{
//Get window width and height
var winW = 630, winH = 460;
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth ) {//alert("in 2");
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {//alert("in 3");
winW = window.innerWidth;
winH = window.innerHeight;
}
document.getElementById("ifrBDiagram").width = (winW * 0.95);
document.getElementById("ifrBDiagram").height = (winH * 0.88);
}
Code: <table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;"> <tr> <td><b>Bnr No:</b></td> <td><input type="text" id="txtBnr" name="txtBnr" /></td> <td> </td> <td> </td> </tr> <tr> <td><b>Lot No:</b></td> <td><input type="text" id="txtLot" name="txtLot" /></td> <td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()"> <INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td> <td> </td> </tr> <tr> <td><b>Failure Catalogues:</b></td> <td><select id="myList"> <option></option> <option>DSO</option> <option>Pre-Assembly</option> <option>PO EOL</option> <option>TDSON/TSDSON</option> <option>S308/WISON</option> </select> </td> <td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td> <td> </td> </tr> <tr> <td colspan="4"> <iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;"> <span id="sMsg"></span> </iframe> </td> </tr> </table> When I first run the html , the interface just goes like this. After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly. Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks Hey, I have two iframes like this: iframe1 = chat window iframe2 = form to enter text to chat Now currently i have iframe1 with a meta refresh on every 1 second. But i've seen live chats before with JS which are not refreshing the page all the time or so it appears...what i mean by this as the meta refreshes the first iframe my browser shows a status bar and loading symbol on firefox, but an old js chat i saw which wasn't free script didn't do this it was pure smooth and didn't look like it was refreshing all the time even if it was it hid it well. How was that done because my method sucks incomparison with make a live chat look "live". Hope you can help me. Okay, I'm trying to refresh my iframe ads, 3 of them. The code works, its just making the functions work "per" ad. When it refreshes, it changes "all" ads, I want them to refresh at different RATE Code: function reloadFrames(first, refresh){delay = 0.2; //minutes to delay the refresh
max_refreshes = 3; if (max_refreshes > refresh){refreshed = refresh + 1;setTimeout("reloadFrames(false, refreshed)", delay*60*1000); if (!first) {ads = document.getElementsByName("ad");for(var i=0; i<ads.length; i++) {ads[i].src = ads[i].src;}}}
}
function reloadFrames2(first, refresh){delay = 1; //minutes to delay the refresh
max_refreshes = 3; if (max_refreshes > refresh){refreshed = refresh + 1;setTimeout("reloadFrames(false, refreshed)", delay*60*1000); if (!first) {ads = document.getElementsByName("ad2");for(var i=0; i<ads.length; i++) {ads[i].src = ads[i].src;}}}
}
function reloadFrames3(first, refresh){delay = 1.4; //minutes to delay the refresh
max_refreshes = 3; if (max_refreshes > refresh){refreshed = refresh + 1;setTimeout("reloadFrames(false, refreshed)", delay*60*1000); if (!first) {ads = document.getElementsByName("ad3");for(var i=0; i<ads.length; i++) {ads[i].src = ads[i].src;}}}
}
ad codes: Code: <iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="728" height="90" src="http://ad.103092804.com/st?ad_type=iframe&ad_size=728x90§ion=656647" name="ad"></iframe> <iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="120" height="600" src="http://ad.103092804.com/st?ad_type=iframe&ad_size=120x600§ion=656647" name="ad2"></iframe> <iframe frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="600" src="http://ad.103092804.com/st?ad_type=iframe&ad_size=160x600§ion=656647" name="ad3"></iframe> Is this possible to get each iframe to refresh at a different rate, or even combine the functions into one? I dont code much javascripts. Thanks -Tim Hi, i will try to be as brief as possible. I have a page A with form: Code: <form id="search" action="find.html" method="get"> ... (some select options) ... <input type="submit" class="submit" value="search"> this form look up some holiday destination which appears on this page with url: (example) Code: www.domain.com/find.html?destination=italy&price=500 Now, I dont want to display result on this page, but on page B, in iframe. I found a way how to redirect output as a link to properly show in iframe on page B. Page A contains: Code: <a href="pageb.html?http://www.domain.com/find.html?destination=italy&price=500">show on page B</a><br> Page B contains: Code: <script type="text/javascript">
<!--
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
window.frames["iframe"].location=url
}
}
onload=loadIframe
//-->
</script>
<iframe src="" name="iframe" id="iframe"</iframe>
In this case page B will properly load requested link in iframe. Problem is it is just a static link... I want to display search result from the form. Thanks a lot for your help... I have an iFrame that is loaded when a user types a url into a text box. Is it possible to display the meta-description of the page that is diplayed in the iFrame in the main (parent) page ? Here is the Iframe code I am using in the body: Code: <iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no"> </iframe> and here is the script in the header: Code: <script>
function goTo() {
var input = get("box").value,
frame = get("frame");
if(input.match(/\bhttp(.)*/)) {
frame.src = input;
} else {
input = "http://" + input;
frame.src = input;
}
}
function get(id) {
return document.getElementById(id);
}
</script>
Hi guys, I've been breaking my brains for few hours, I already searched online and I found nothing so far. What I wanna do.... I have 5 different images linked to 5 different websites. Once the image is clicked, the first link will be displayed in an iframe, and the image will change to the second one. Once we click on the second image, the second link will be displayed using the same iframe, and so on. The code changes the images,but I dunno how to deal with the link to the websites. This is the code: Code: <html>
<head>
<title>Testing...</title>
</head>
<script type="text/javascript">
imgs=Array("1.png","2.png","3.png","4.png","5.png");
links=Array("www.vbct.ca","www.cnn.com","www.castanet.net","www.yahoo.com","www.cubaweb.cu");
var x=0;
function change() {
document.getElementById("changes").src=imgs[++x];
if (x==4) {
x=-1;
}
}
if (!imgs[x+1]) {
x=-1;
}
</script>
<body>
<div>
<iframe src="http://www.vbct.ca" style="border: 0; position:relative; top:0; left:0; right:0; bottom:0; width:100%; height:400px;" name="page" width="100%"></iframe>
</div>
<br /><br />
<div>
<a href="#" target="page"><img src="1.png" id="changes" alt="alttext" onmousedown="change()" style="cursor: pointer;" /></a>
</div>
</body>
</html>
And this is the link to the test page: http://www.virtualbc.ca/sites/test/ |
|||||||