Javascript in HTML iFrame

Status
Niet open voor verdere reacties.
C

Crimby

Gebruiker
Lid geworden
2 mrt 2013
Berichten
13
Hallo allemaal,

Ben begonnen aan een webpagina met diverse dashboards. Deze dashboards zijn aan mij doormiddel van linkjes aangereikt en heb ik in iframes kunnen plaatsen.
Deze gehele pagina wordt vervolgens ververst en komt er een andere pagina tevoorschijn.
Nu wil ik dat dat verversen in een van de iframes gebeurt in plaats van de gehele pagina.

Het javascript dat gebruikt wordt in de pagina en wat dus in een iframe geplaatst wordt is het volgende (zelf geen verstand van javascript):

<script type="text/javascript">
window.onload = setupRefresh;

function setupRefresh() {
setTimeout("refreshPage();", 30000); // milliseconds
}
function refreshPage() {
window.location = "test.html";
}
</script>


Hoe kan ik dat in een iframe plaatsen?:o
 
Laatst bewerkt door een moderator:
De code die je hebt geplaatst, staat deze in het iframe of op de verzamelpagina (laat ik het zo noemen)?. Ik weet niet of je de sites op de linkjes die je hebt gekregen kunt aanpassen, maar anders kan je daar een script op zetten die het refresht.


Een andere manier: je kunt op de verzamelpagina een script zetten dat het iframe om de x tijd refresht. Hier kan ik je ook nog wel bij helpen.


Als dit totaal niet is wat je wil, zeg het dan ook. Dan kan ik nog even verder nadenken. Ik heb namelijk wel redelijk javascript kennis.
 
Laatst bewerkt:
Bedankt voor je snelle reactie, helaas kan ik de linkjes in de iframes niet aanpassen, dus dan wordt het optie twee denk ik.
Kan ik dan per iframe aangeven welke ververst moet worden en welke dan getoond moet worden?
 
Ik weet eigenlijk niet precies helemaal wat je bedoelt. Je kunt wel kiezen dat je een iframe hebt, en om de tijd verandert de inhoud van dit iframe. Dus een andere site erin. Maar hiervoor is het makkelijker denk ik om php te gebruiken en niet javascript. Php heb ik ook kennis van.

Heb je misschien een demo of iets waar je nu mee bezig bent, zodat ik even kan kijken wat je bedoelt of kan je het misschien uitleggen?
 
een echte demo heb ik niet... want het is een pagina dat op intranet getoond wordt. Echter de HTML ziet er ongeveer zo uit:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache" />
<link rel="stylesheet" href="css/new.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<title>Support Dashboards</title>
<!--<script type="text/javascript">
window.onload = setupRefresh;

function setupRefresh() {
setTimeout("refreshPage();", 30000); // milliseconds
}
function refreshPage() {
window.location = "test.html";
}
</script> -->
</head>
<body>
<div id="container">

<div id="columnmaker">
<div id="chartsleft">
<iframe src="HeaderLeftTop.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
<br />
<h2>Workload per Support centre</h2>
<iframe src="Dashboard1.html" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
</div>

<div id="chartsmiddle">
<div id="middlechart">
<h1>Support Dashboards</h1>
<iframe src="Dashboard2.html" width="100%" height="70%" scrolling="no" frameborder="0"></iframe>
<br />
<br />
<img src="logo.gif" alt="logo" />
</div>
<!-- <div id="middlespace">
<br />
</div>-->
</div>


</div>
<div id="chartsright">
<h2>Total Second line</h2>
<iframe src="Dashboard3.html" width="100%" height="43%" scrolling="no" frameborder="0"></iframe>
<br />
<h2>Total Standstill</h2>
<iframe src="Dashboard4.html" width="100%" height="50%" scrolling="no" frameborder="0"></iframe>
</div>

</div>
</body>
</html>
Klik om te vergroten...
 
HTML: 
<!--<script type="text/javascript">
window.onload = setupRefresh;

function setupRefresh() {
setTimeout("refreshPage();", 30000); // milliseconds
}
function refreshPage() {
window.location = "test.html";
}
</script> -->

Deze code refresht de hele pagina. Stel dat je begint met dashboard 1, je wilt na 30 seconden dashboard 2 zien. Dan kun je daarvoor dit script gebruiken:

Plak dit tussen je head tags:
HTML: 
<script>
var links = ["http://www.example.com/page","http://www.example.com/anotherpage","http://www.example.com/anotheranotherpage"];
var i = 0;
var renew = setInterval(function(){
    document.getElementById("foo").src = links[i];        
    if(links.length == i){
        i = 0;
    }
    else i++;
},30000);
</script>


Bij var links moet je je links aanpassen, dus die example.com/page moet je vervangen door jouw site/dashboard1.html enzovoort. Als je zo je drie dashboards hebt ingevuld plak je dit als iframe in je html tussen je body tags:

HTML: 
<iframe id="foo" src="http://example.com"></iframe>

Verander hier example.com in de link van je 1e dashboard.

Nu zou er elke 30 seconden een ander dashboard in het iframe moeten komen.

Als je bovenstaand iframe hebt geplakt moet je alle andere iframes van je pagina verwijderen, zodat je alleen deze over houdt.

Ik hoop dat het lukt, nu moet ik even weg. Als het niet lukt ben ik over een uur weer terug en help ik je dan.

SUCCES
 
Top ik ga het even proberen, maar dit lijkt wel mooi inderdaad!
 
Oke dat werkt perfect inderdaad!

Heb het een beetje aangepast, nou wordt alleen de middelste aangepast en wisselt met een andere dashboard. Exact zoals ik wilde. Echter.. heb er twee linkjes in gezet en nu gaat ie naar de tweede naar een foutmelding van de IIS en wordt daarna wel weer ververst naar de goede.

Echter heb beide linkjes gecontroleerd en die gaan nergens van zichzelf heen.
 
Laatst bewerkt:
Fijn dat het werkt!

Als je er twee linkjes in hebt verwerkt, moet je zorgen dat dat de enige zijn. Dus dan moet je de laatste weghalen. Ook moet je het eerste dashboard bij het iframe als source invullen, maar ook bij de variabele.
 
Ik heb nu zeg maar 5 iframes weer, maar 1 daarvan heb ik de id aangegeven. Hierin de source aangegeven voor het 1e dashboard en in de javascript heb ik het 1e en 2e dashboard aangegeven. Hij ververst nu perfect (scaling nog niet goed maar dat komt later) alleen na het 2e dashboard geeft ie een foutmelding. Dan ververst ie weer en dan gaat ie weer netjes naar het eerste dashboard.
 
Dus dit staat in je script?

var links = ["dashboard1","dashboard2"]; ?

Anders moet je proberen bij het iframe de src gewoon leeg te laten (""). En dan proberen of het dan wel werkt.
 
Ja inderdaad. ik heb inmiddels ook de iframe leeggehaald en dit werkt hetzelfde. Echter krijg je nu de eerste 30 seconde een leeg vlak. vervolgens dashboard 1 en 2 en dan weer een 404 error.
 
Dat is raar, vul dan maar weer bij de src van het iframe het eerste dashboard in. Heb je alle links uit de var links een keer gewoon gekopieerd en los uitgetest?
 
Ja, had die heb die linkjes gekopieerd uit bestaande pagina's. Daarna heb ik ze ook weer uit de iframe gekopieerd en apart getest en geen van beide ververst naar een niet bestaande pagina.
 
Heb onderstaande gekregen, zal dit het zijn?

Vermoedelijk loop je uit je array index. De lengte van de array is 2. Maar de huisnummers van de individuele elementen zijn 0 en 1. Dus op een gegeven moment wordt i = 2 na i++ en gaat ‘ie proberen links[2] te pakken en die is er niet (javascript geeft dan null ofzo) en die als src zetten geeft ws. de fout. Wat helpt is if(links.length - 1 == i) gebruiken zo uit m’n hoofd.
 
De links.length -1 == i was inderdaad de oplossing. Werkt nu perfect!

Code: 
<script>
var links = ["dashboard1","dashboard2"];
var i = 0;
var renew = setInterval(function(){
    document.getElementById("refreshmiddle").src = links[i];        
    if(links.length -1 == i){
        i = 0;
    }
    else i++;
},3000);
</script>
 
Toch nog even een vraagje; kan ik deze script nogmaals gebruiken alleen dan voor tekst ipv iframes? De titel heb ik boven het dashboard apart van de iframe staan. Nu wil ik deze tegelijk wisselen met de iframes. Is dat mogelijk? Ik ga ook kijken of ik toch toegang kan krijgen tot die dashboards en de html pagina's die in de iframes gebruikt worden.
 
Moet mogelijk zijn, met PHP weet ik wel hoe het moet, met Javascript niet helemaal. Momenteel ben ik druk met mijn eigen projectjes, maar als ik tijd heb zal ik er naar kijken!
 
Geweldig! Ik ga ook verder met het uitzoeken, als ik het weet post ik het ook even.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan