Probleem met iframes en scripts

donderdag 15 maart 2012 14:43

Acties:

0 Henk 'm!

Topicstarter

Hallo allemaal.

Ik heb een heel appart probleem met een iframe in combinatie met een script.

Ik heb een pagina waar een iframe in zit. In dit iframe staat een pagina met een script.
Wanneer ik nu een andere pagina in dit iframe wil laden wordt deze niet in het iframe gezet maar in een nieuw window.
Wanneer ik in het iframe een pagina heb met tekst is er niets aan de hand, dan wordt de nieuwe pagina gewoon in het iframe geplaatst.

Nu is mijn vraag: wat moet ik doen om toch de pagina in het iframe te laden ipv in een nieuw scherm.

ps. Ik gebruik Chrome als browser.

Voorbeeld iframe:

code:

1	<iframe frameborder="0" style="width: 100%; height: 100%;" src="./pages/home.html" id="hoofdframe"></iframe>

Voorbeeld script:

code:

<head>
<title>Home</title>
</head>
<BODY>
<div id="img" style="position:absolute;">
<img src="../images/logo.jpg" onMouseDown="pauseResume();">
</div>

<SCRIPT LANGUAGE="JavaScript">
var step = 1;
var delay = 5;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var name = navigator.appName;
if(name == "Microsoft Internet Explorer") name = true;
else name = false;
name = true;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = window.innerHeight;
width = window.innerWidth;
Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
   }
}
function start() {
if(name) img.visibility = "visible";
else document.img.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pauseResume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
   }
}
start();
</script>
</BODY>

Voorbeeld pagina laden:

code:

1	<a href="./pages/contactform.html" target="hoofdframe">Contactformulier</a>

donderdag 15 maart 2012 14:47

Acties:

0 Henk 'm!

azerty

misschien ergens een base_target op _blank ingesteld in de pagina waar je die a aanroept?

Edit: beter moeten lezen...

Zowieso zou een al dan niet uitvoerend js in een iframe geen invloed mogen hebben op het al dan niet herladen van de inhoud van een iframe... Lijkt me raar.

[ Voor 51% gewijzigd door azerty op 15-03-2012 14:49 ]

donderdag 15 maart 2012 22:10

Acties:

0 Henk 'm!

R4gnax

In regel 19 van je code sample declareer je een variabele genaamd name. Dat gebeurt weliswaar netjes met het var keyword, maar een variabele declaratie in de globale scope is volgens ECMAScript (zelfs met het var keyword) gelijk aan het declareren van een property op het global object.

In browsers is het global object je window. Wat ben je daar dus aan het doen? Juist ja! De window.name property aan het zetten, en daarmee verdwijnt dus de originele naam waaraan je refereert in het target attribuut van je links. Standaard gedrag is om voor een niet bestaande window naam een window aan te maken met die naam. Daarom zie je de hele tijd een nieuw venster ...

Probeer zelf maar eens:

HTML:

<!DOCTYPE html>
<html>
  <body>
    <script>
      var name = "leakyName";
      alert( window.name );
    </script>
  </body>
</html>

Heel eenvoudig op te lossen door je code altijd vanuit een immediately invoked function expression (IIFE) te laten draaien. Dan besmet je de globale scope namelijk niet:

HTML:

<!DOCTYPE html>
<html>
  <body>
    <script>
      ( function() {
        var name = "nonLeakyName";
        alert( window.name );
      })();
    </script>
  </body>
</html>

Beter nog dan je er gemakkelijk vanaf te maken met enkel een IIFE is om die rommel helemaal te dumpen en gewoon een net alternatief te schrijven. Wat je nu hebt is een fossiel uit de jaren '90, waar echt geen plek meer voor is op het moderne web.

offtopic:
Zocht er laatst trouwens niet iemand naar redenen om je code in een IIFE te wrappen? Hier is dan een mooie waar je uren zoet mee kunt zijn als je niet bekend bent met deze quirk van ECMAScript.

donderdag 15 maart 2012 22:25

Acties:

0 Henk 'm!

azerty

R4gnax schreef op donderdag 15 maart 2012 @ 22:10:
*snip*

Mooie oplosssing. Lees nu trouwens juist zelf de code nog eens door, en:

code:

var name = navigator.appName;
if(name == "Microsoft Internet Explorer") name = true;
else name = false;
name = true;

Dan maakt de browser toch niet meer uit? Het is zowieso altijd true

donderdag 15 maart 2012 23:50

Acties:

0 Henk 'm!

MarchelV

Topicstarter

Ah, kijk! Daar wordt het een heel stuk duidelijker van R4gnax.

Stom dat je zo'n foutje over het hoofd ziet. Ik gaf Grome, W3.org. de kat en de rest van de wereld al de schuld maar het vingertje wijst toch weer naar mij...

Mijn manier van scripten is wat ouderwets, dat weet ik. Lang niets meer mee gedaan maar toch maar weer eens wat aan het prutsen geweest. Me maar eens verdiepen in de nieuwste ontwikkelingen

Bedankt voor jullie info!

Onderwerpen