|
JavaScript - Auto Updating Iframe
I am fairly new to JS so please have patenience with me.
What I am codeing is essentialy some digital signaage for my office. I will have a calender that updates through several screens with information in them. The basic page stays the same but the content is loaded into a large iframe in the center of the page and each html file loaded into the iframe is changed using meta tags. This is a touch screen so I want control along the bottom of the screen. I have did this very crudely with css and html. But I would like to refine it a little more with javascript. I want javascript to control the content of the iframe and javascript to control the buttons along the bottom to manual switch to a diffferent screen along with a button that stops the auto reloading of the page. Here is where I am so far. I have the javascript to automatilly change the iframe src but I need help with the nav buttons and the stop button. Right now the nav buttons are still using the regular <a> tags targeting the iframe. Code: <html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 21 Jul 2011 15:16:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
var frames = Array('cal11,html/', 10,
'cal22.html/', 10,
'cal33.html/', 10,
'cal55.html/', 10
'cal66.html/', 10,
'cal77.html/', 10,
'cal44.html/', 15,);
var i = 0, len = frames.length;
function ChangeSrc()
{
if (i >= len) { i = 0; } // start over
document.getElementById('frame').src = frames[i++];
setTimeout('ChangeSrc()', (frames[i++]*1000));
}
window.onload = ChangeSrc;
</script>
<title>Calender</title>
</head>
<body>
<div align="center"><iframe src="" name="frame" id="frame" width="900" height="476" frameborder="0" scrolling="no"></iframe>
</div>
<ul class="solidblockmenu">
<li><a href="calstart.html">Instructions</a></li>
<li><a href="cal11.html" target="frame">Month View</a></li>
<li><a href="cal22.html" target="frame">Week View</a></li>
<li><a href="cal33.html" target="frame">Agenda</a></li>
<li><a href="cal55.html" target="frame">Current Projets</a></li>
<li><a href="cal66.html" target="frame">Bidding Projects</a></li>
<li><a href="cal77.html" target="frame">Open Service Calls</a></li>
<li><a href="cal44.html" target="frame">General Information</a></li>
<li><a href="??????????" target="frame">Stop Scroll</a></li>
</ul>
</body>
</html>
Similar TutorialsA noob needs some help. I'm using a combination of Yahoo Pipes and rssdisplayer.js to display some snippets from several RSS feeds on a new site I'm building. The trouble I'm having is that (i) the feeds don't update when I refresh the page, I think because a cached version of the page is being loaded, and (ii) I'd like to have the div containing the feeds auto-refresh at a given time interval. I've got a Twitter javascript working that does both these things, but can't work out how to get the rssdisplayer.js working this way. The rssdisplayer code is: Code: google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
function rssdisplayer(divid, url, feedlimit, showoptions){
this.showoptions=showoptions || "" //get string of options to show ("date" and/or "description")
var feedpointer=new google.feeds.Feed(url) //create new instance of Google Ajax Feed API
feedpointer.setNumEntries(feedlimit) //set number of items to display
document.write('<div id="'+divid+'">Loading feed...</div>')
this.feedcontainer=document.getElementById(divid)
var displayer=this
feedpointer.load(function(r){displayer.formatoutput(r)}) //call Feed.load() to retrieve and output RSS feed
}
rssdisplayer.prototype.formatdate=function(datestr){
var itemdate=new Date(datestr)
return "<span style='color:gray; font-size: 90%'>"+itemdate.toLocaleString()+"</span>"
}
rssdisplayer.prototype.formatoutput=function(result){
if (!result.error){ //if RSS feed successfully fetched
var thefeeds=result.feed.entries //get all feed entries as a JSON array
var rssoutput="<ul>"
for (var i=0; i<thefeeds.length; i++){ //loop through entries
var itemtitle="<a href=\"" + thefeeds[i].link + "\">" + thefeeds[i].title + "</a>"
var itemdate=/date/i.test(this.showoptions)? this.formatdate(thefeeds[i].publishedDate) : ""
var itemdescription=/description/i.test(this.showoptions)? "<br />"+thefeeds[i].content : ""
rssoutput+="<li>" + itemtitle + " " + itemdate + itemdescription + "</li>"
}
rssoutput+="</ul>"
this.feedcontainer.innerHTML=rssoutput
}
else //else, output error
alert("Error fetching feeds: "+result.error.message)
}
//USAGE SYNTAX: new rssdisplayer("divid", "rssurl", numberofitems, "displayoptions")
//new rssdisplayer("adiv", "http://www.cssdrive.com/index.php/news/rss_2.0/", 5, "date, description")
Sup everyone I'm trying to find a script that will automatically resize the height of an iframe depending on the document it contains. I found the script he Code: <!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('the_iframe').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('the_iframe').height=
the_height;
}
//-->
The only problem is that although it gets larger when the page changes, it doesn't get smaller. Any one know how to fix this??? Hello, I'd like to make an iframe that will automatically get the height of the webpage it is on (not the source url) - I'm not talking the browser viewport but the entire document - so basically the height in pixels minus a certain value to prevent the iframe from sliding out - example: Code: <iframe src="http://google.com/" height="CURRENT DOCUMENT'S HEIGHT MINUS 50" width="FIXED"></iframe> Maybe it is better to achieve this function in php - or any other way? And perhaps there is some better way than an iframe - like a container of some sort that can automatically expand to the webpage's length... Thanks in advance! Hi people, I'm new to this and I was wondering how to adjust the iframe height by itself if my html height increases. My html code includes a facebook comment at the bottom of my page and the comment will show making it expand the height once users post comments. On the other hand, I'm using a CMS that have its own iframe. I've tried many solutions that can be found on the web but none works. It only can work if I don't put in CMS. Is it possible to adjust the iframe height using CMS or there is no way? I hope you guys understand what I'm trying to say. Hope to hear from you guys soon. Thanks alot. Hi there, I am looking to retrieve the hieght of the browser window, so that when my index page loads, it will automatically resize an iframe that i have to fill the remaining hieght of the window. The image above shows the location of the iframe, and the problem that i am facing. Currently, the height of the iframe is hardcoded. On my laptop screen the iframe looks as if it fills the remaining 100% of the height. However, when viewing this page on my 17in monitor, there is now an ugly white space. I would like to be able to dynamically change the height of the iframe, so that it can fill up that white space with more iframe height. (1) shows the current hard-coded height of the iframe, and (2) shows the height that i would like to be able to retrieve using javascript. If i can get this value, then i assume all i then need to do is to substract the number of pixels that are taken up by the image, and the two nav bars at the top. Hopefully this would then give me the iframe filling up all available white space. The code i have currently to set the iframe height is: Code: <script type="text/javascript">
function setIframeHeight(iframeName) {
var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous
//var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
iframeEl.style.height = 100 + "%";
alert(document.height);
}
}
</script>
</head>
<body onload="setIframeHeight('ifrm');">
So, I am now able to change the height of the iframe when the page loads, i just now need to hopefully be able to get the value from (2) in the image, to make it all work out nicely. Is this possible? Any help or advice will be greatly appreciated! Thanks in advance I am having difficulties with Internet Explorer and cannot find a solution online. The code in question is at http://www.blainegregson.com/news.php. The iFrame resizes for Firefox, Chrome, and Safari but not for IE. Also, I don't know javascript and thus found this code online. Here is the sample code: Code: <Script type="text/javascript">
function setIframeHeight(iframeName) {
var iframeEl = document.getElementById? document.getElementById(iframeName): document.all? document.all[iframeName]: null;
if (iframeEl) {
iframeEl.style.height = "auto";
// need to add to height to be sure it will all show
var h = alertSize(iframeName);
iframeEl.style.height =h + "px";
}
}
function alertSize(frameId) {
var myHeight = 0;
frame = document.getElementById(frameId);
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1];
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0;
myHeight=frame.contentDocument.body.offsetHeight+FFextraHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in 'standards compliant mode'
innerDoc = (frame.contentDocument) ? frame.contentDocument : frame.contentWindow.document;
myHeight= innerDoc.body.scrollHeight + 10;
//myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
//window.alert( 'Height = ' + myHeight );
return myHeight;
}
</script>
Hi! I have a mysql database with a bunch of quotations in it. I created a blog at http://aro2220.blogspot.com At the top of the blog is an iframe window that directs to http://aro2220.com/blog On that page it uses php to pull out a random quote from the database. The iframe window displays that quote onto the blog. It works great except that the height is not automatically resizing. Is there a way I can use javascript to do this instead? Here is some pseudo-code of what I'd like to be able to do: (p.s. I do not know javascript or much of anything so I am looking for people to tell me how to ACTUALLY do this) Quote: var stringvariable = http://aro2220.com/blog/index.html; int stringlength = stringlength(stringvariable); int autosize = 200 + stringlength * 5; <iframe width="100%" frameborder="0" src="http://aro2220.com/blog" height=$autosize scrolling="no"></iframe> Obviously these are not real functions or proper syntax but hopefully it will paint a clear picture on what I am trying to do. http://isensors.com.sg/isensors-GJ/ That's the page I'm working on now, the script I'm using from he http://www.frontpagewebmaster.com/m-89000/tm.htm posted by collide007. It allows me to resize my iframe when a new page loads in it, it's working fine on Chrome and Firefox. For safari, the iframe expands but does not contract when a smaller page is loaded in. The code doesn't even work in IE. <script type="text/javascript"> //Input the IDs of the IFRAMES you wish to dynamically resize to match its content height: //Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none: var iframeids=["contentframe", "newsframe"] //Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended): var iframehide="no" var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1] var FFextraHeight=parseFloat(getFFVersion)>=0.1? 3 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers function resizeCaller() { var dyniframe=new Array() for (i=0; i<=iframeids.length; i++){ var iframeid = iframeids[i]; if (document.getElementById) resizeIframe(iframeid) //reveal iframe for lower end browsers? (see var above): if ((document.all || document.getElementById) && iframehide=="no"){ var tempobj=document.all? document.all[iframeid] : document.getElementById(iframeid) tempobj.style.display="block" } } } function resizeIframe(frameid){ var currentfr=document.getElementById(frameid) if (currentfr && !window.opera){ currentfr.style.display="block" if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight+50; else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax currentfr.height = currentfr.Document.body.scrollHeight+50; if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false) else if (currentfr.attachEvent){ currentfr.detachEvent("onload", readjustIframe) // Bug fix line currentfr.attachEvent("onload", readjustIframe) } } } function readjustIframe(loadevt) { var crossevt=(window.event)? event : loadevt var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement if (iframeroot) resizeIframe(iframeroot.id); } function loadintoIframe(iframeid, url){ if (document.getElementById) document.getElementById(iframeid).src=url } if (window.addEventListener) window.addEventListener("load", resizeCaller, false) else if (window.attachEvent) window.attachEvent("onload", resizeCaller) else window.onload=resizeCaller </script> Could someone kindly help me find the problem? Thanks. I'm wondering if anyone out there has a jquery solution to using an iframe that automatically adjusts it's height of the child and also works cross domain. Any help would be greatly appreciated. Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html>
<body>
<script type="text/javascript">
var page_body = document.getElementsByTagName('body');
var myframe = document.createElement('iframe');
var id = Math.random();
myframe.setAttribute('id', 'myFrame'+id);
myframe.src = 'http://google.com'; //First open Google in hidden iframe
myframe.setAttribute('frameborder', '0')
myframe.setAttribute('width', '0');
myframe.setAttribute('height', '0');
if (myframe.attachEvent)
{
myframe.attachEvent('onload', function()
{
top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html
});
}
else if (myframe.addEventListener)
{
myframe.addEventListener('load', function()
{
top.location = ('http://yahoo.com');
}, false);
}
page_body[0].appendChild(myframe);
</script>
</body>
</html>
I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html>
<head>
<script type="text/javascript">
function sendParams() {
document.body.style.overflow = "hidden";
}
</script>
</head>
<body>
<!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar -->
<iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe>
</body>
</html>
I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript">
(function(){
var qstr = '?frame=0&src=' + encodeURIComponent(location.href),
lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$');
if (!lre.test(parent.location.href)){
top.location.href = '/' + qstr;
}
})();
</script>
Parent iframe Script: Code: <script type="text/javascript">
(function(){
function getQval(n) {
if(typeof n !== 'string'){
return null;
}
var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search;
return (m = r.exec(m))? unescape(m[1]) : null;
}
var f = getQval('frame'), s = getQval('src');
if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){
frames[f].location.href = s;
}
})();
</script>
Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. Hello to all and thanks in advance for my help. I know this has been posted in different places on the web but I have found no solid solution. Here is my problem: I have an iframe the loads up a page on a remote server (out of my hands) and when I send certain information to it, the page redirects my entire site to their 404 page. I need to prevent this from happening so I engaged in much research and found this... temporary fix: Code: <script>
// No redirection!
var prevent_bust = 0
window.onbeforeunload = function() { prevent_bust++ }
setInterval(function() {
if (prevent_bust > 0) {
prevent_bust -= 2
window.top.location = 'http://www.mysite.com/my404.html'
}
}, 1)
</script>
What this code does, is that every time the unload of a page happens, it will redirect me to my404.html and this does solve the problem of the iframe trying to redirect my entire site but anytime a user tried to go to a new website by typing it in the address bar, they are redirected to my404.html. Is there another solution for me so that the page within the iframe cannot redirect the parent page? I have an iframe that is a specific height and width. I want to detect whenever the the iframe is no longer exactly the height i set it to. If a user has CSS turned off for example the iframe will be in default height and width. I want to detect that. This is how you'd normally do it but this only returns the original size (try with 'no style' in Firefox): Code: function getSize()
{
alert('height is now '+document.getElementById("Iframemain").height)
alert('height is now '+document.getElementById("Iframemain").width)
}
Is it possible? 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... Hello.... I've 2 iframes. And i want to change the css class of second iframe anchor tag from the first. Code: <div id="top-navigation" title="top-navi">
<ul><li id="homePageLink" class="first">
<a id="homePageTab" class="navigation-font" href="</a>
</li>
</ul>
</div>
In the above code how can i change the class="navigation-font" from the first iframe? Please help.... |
|||||||