[JS] iframe auto resizen aan de hand van de content er in - Softwareontwikkeling

maandag 23 oktober 2006 20:16

Acties:

Topicstarter

Hallo iedereen,

Titel zegt het eigenlijk al, maar zal het nog even uitleggen.
Ik wil op me site dmv een iframe een andere pagina in de gaten houden.

Op die pagina staat een shoutbox, op die pagina staat de shouts in een div die om de 10 sec automatisch de inhoud van de div refreshed.

Nou is natuurlijk een shout niet altijd even lang... dus als ik in die iframe es een lange shout tegenkom krijgt iframe of scrollbalk of ik kan dus een shout niet helemaal zien, nou dat is natuurlijk niet wat ik wil.

Dus is het op een of andere manier mogelijk om:
op de pagina waar de iframe staat een connectie te maken met de pagina waar de shouts staan, en te kijken hoe hoog de div dan word waar de shouts in staan en die height dan terug te geven zodat je je iframe weer op hoogte kan aanpassen.
-----

Ik zat te denken aan het volgende,
Op de pagina die ik laad in mijn iframe kan je zeg maar 2 modus kijken (aan de hand van url).
m=0: default krijg je gewoon je volledige shoutbox enzo
m=1 dan krijg je een preview, van de 2 nieuwste shouts.
Ik zat er aan te denken om de 2 nieuwste shouts mbv php op te halen, te exploden op '\n' zodat je weet hoeveel regels het gaat nemen( alleen zit je dan nog er mee dat als een regel te breed is voor de width dat de regel dan natuurlijk ook weer een '\n' krijgt, alleen kan je die niet tellen

)en en dan je iframe daar op aanpassen.

Maar kan dit makkelijker/beter?

.

maandag 23 oktober 2006 20:30

Acties:

Hermanvh

webOS fan, hacker, developer

Je kan de grootte van je iframe element op je pagina aan laten pasen a.d.h.v. de content van de pagina in het iframe. Even zoeken naar een stukje code voor je. Heb hem zelf wel eens gebruikt nl

edit:
Gevonden

:

code:

//adjust framesize automatically when needed for services
function adjustFrame()
{
    var iframeHeight;

    //NN4
    if (document.layers)
    {
        iframeHeight = document.body.offsetHeight + 20;
        parent.document.service_code.height=iframeHeight;
    }
    
    //IE
    if (document.all)
    {
        iframeHeight = document.body.scrollHeight + 20;
        parent.document.all.service_code.style.height=iframeHeight;
    }
    
    //Moz 1.xx or NN 6.xx or IE 5.5+
    if (!document.all && document.getElementById)
    {
        iframeHeight = document.body.offsetHeight;
        iframeHeight = iframeHeight + 30;
        window.parent.document.getElementById("service_code").height=iframeHeight;
    }
}

"service_code" is in dit geval de naam van je iframe.
Vervolgens roep je in de PHP/HTML pagina IN je iframe de javascript functie aan middels:

code:

1	<body onload="adjustFrame();">

[ Voor 69% gewijzigd door Hermanvh op 23-10-2006 20:35 ]

webOS all the way!

maandag 23 oktober 2006 20:43

Acties:

Optix

Topicstarter

Klikkerdeklik

Werkt niet... hij blijft bij elke site die ik ook invoer als source zelfde hoogte en breedte...

.

maandag 23 oktober 2006 20:55

Acties:

Hermanvh

webOS fan, hacker, developer

Night.Fade schreef op maandag 23 oktober 2006 @ 20:43:
Klikkerdeklik

Werkt niet... hij blijft bij elke site die ik ook invoer als source zelfde hoogte en breedte...

Aanpassen aan een externe site kan niet (voor zover ik weet), maar wel aan de content van het iframe zelf wel.

webOS all the way!

maandag 23 oktober 2006 20:57

Acties:

Optix

Topicstarter

Hmm dan kom ik dus denk ik toch op de oplossing die ik in TS meld...

Iemand nog een idee??

.

maandag 23 oktober 2006 21:04

Acties:

Johnny

ondergewaardeerde internetguru

Kan je dit niet veel makkelijker via AJAX doen? Bij het laden van de pagina haal je alle berichten op die je wilt hebben + de timestamp van dat moment, na 10 seconden vraag je met met setTimeout alle berichten na de timestamp op en voeg je die toe aan de pagina, en verwijder je eerder geplaatste berichten.

Dit is sneller omdat je niet steeds alle berichten hoeft op te halen en als je alle berichten gewoon in een andere HTML-element zet groeit het in tegenstelling tot een iframe gewoon mee.

Aan de inhoud van de bovenstaande tekst kunnen geen rechten worden ontleend, tenzij dit expliciet in dit bericht is verwoord.

maandag 23 oktober 2006 21:05

Acties:

Hermanvh

webOS fan, hacker, developer

Wat dus wel kan is onderstaand voorbeeld.
http://bi-design.nl/iframetest.html

Wanneer je hier dus velden invult, en submit, dan wordt het iframe automatisch aangepast.

webOS all the way!

maandag 23 oktober 2006 21:16

Acties:

Optix

Topicstarter

Johnny schreef op maandag 23 oktober 2006 @ 21:04:
Kan je dit niet veel makkelijker via AJAX doen? Bij het laden van de pagina haal je alle berichten op die je wilt hebben + de timestamp van dat moment, na 10 seconden vraag je met met setTimeout alle berichten na de timestamp op en voeg je die toe aan de pagina, en verwijder je eerder geplaatste berichten.

Dit is sneller omdat je niet steeds alle berichten hoeft op te halen en als je alle berichten gewoon in een andere HTML-element zet groeit het in tegenstelling tot een iframe gewoon mee.

Omdat ik binnen de site al heel veel connecties maak met andere pagina's heb ik dat liever niet. Ook word het javascript voor de helft opgebouwd met PHP. Het moet in dezelfde pagina staan als waar de shouts in staan. En aangezien ik geen javascript kan gebruiken die ik zet in een div mbv een http request object... De code die ik gebruik voor de shoutbox mag niet in de site komen te staan omdat het met een aantal dingen botst dus vandaar een iframe.

In dit geval snel en netjes (alhoewel iframes niet erg netjes staan

)

.