iframe fullsize will net

soniXx123 · 6 November 2014

Hallo Community,

Hab mich hier angemeldet um vielleicht hilfe zu meinem Problem zu finden.

Bin grade dabei eine Seite zu bauen und dort sollen Iframe seiten integriert werden eigentlich handelt es sich mehr um Games. die aber vom Anbieter her mit iFrame zu verfügung gestellt werden.

Naja kurze sache habe in der CSS folgendes stehen:
#apps_iframe {
height:100%;
width:100%;
}

Doch leider wird es nur so angezeigt:

Hier ist noch der Code der html.php

PHP:

{if !Phpfox::getParam('apps.enable_api_support')}
<div class="message">
    {phrase var='apps.api_support_is_disabled_at_the_moment'}
</div>
{else}
{if Phpfox::getUserParam('apps.can_moderate_apps') && !$aApp.view_id}

{/if}
{if $aApp.user_id == Phpfox::getUserId()}
{/if}

{if empty($aApp.app_url)}
<div class="extra_info">
    {if $aApp.user_id == Phpfox::getUserId()}
    {phrase var='apps.this_app_currently_does_not_have_a_call_home_url_set'}
    {else}
    {phrase var='apps.this_app_is_still_under_development'}
    {/if}
</div>
{else}
<div><input type="hidden" name="app_id" value="{$aApp.app_id}" id="js_apps_view_id" /></div>
<iframe class="app_iframe" src="{$sFrameUrl}" name="apps_iframe" id="apps_iframe" frameborder="0" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="no" noresize></iframe>
{/if}
<div class="app_footer">
    <ul class="extra_info_middot">
        <li><a href="{permalink module='pages' id=$aApp.page_id title=$aApp.app_title}">{$aApp.app_title}</a><li>   
    {if Phpfox::isModule('report')}       
        <li>&middot;</li>
        <li><a href="#?call=report.add&amp;height=210&amp;width=400&amp;type=apps&amp;id={$aApp.app_id}" class="inlinePopup">{phrase var='apps.report_this_app'}</a></li>
    {/if}   
        <li>&middot;</li>
                <li><a href="{url link='apps.add' id=$aApp.app_id}">{phrase var='apps.manage'}</a></li>
                <li>&middot;</li>
        <li><a href="#" onclick="$Core.composeMessage({l}user_id: {$aApp.user_id}{r}); return false;">{phrase var='apps.contact_the_developer'}</a></li>
        <li>&middot;</li>
        <li>
            <a href="{url link='apps' uninstall=$aApp.app_id}" class="no_ajax_link" onclick="if (!confirm(oTranslations['core.are_you_sure'])) {l} return false; {r}">
                {phrase var='apps.un_install_this_app'}
            </a>
        </li>
    </ul>
</div>
{/if}

vielleicht habt ihr ja eine idee und könnt mir helfen :)

threadi · 6 November 2014

Der Quellcode stammt scheinbar aus einem Templates eine von dir eingesetzten CM-System. Damit kann man wenig anfangen um dein Problem untersuchen zu können. Bitte zeig einen Link zu der betroffenen Seite, dort könnte man direkt nachschauen was schief geht.

soniXx123 · 6 November 2014

Der link bringt leider nix weil man kommt in den bereich nur mit einem Konto rein und ich weis nicht ob sich jemand extra anmelden mag :)

http://yakibuu.com/apps/3/shadow-kings/

threadi · 6 November 2014

Dann stell die Seite mit allen relevanten Daten öffentlich auf einem der kostenfreien Webspaces zur Verfügung.

soniXx123 · 6 November 2014

Das net so einfach daher habe ich einen Account gemacht:

www.yakibuu.com
B: [email protected]
PW: tester123

Und hier ist dann der Link: http://yakibuu.com/apps/3/shadow-kings/

pax · 7 November 2014

#site_content benötigt eine feste Höhe

soniXx123 · 7 November 2014

Gibts da keine möglichkeit dies anders zu machen also einen festen wert zu geben? weil games z.b. nicht auf 3000px kla kommen aber bei websites würde es gehen.

pax · 7 November 2014

Du könntest mit javascript die Höhe des Iframecontents abfragen und dies dynamisch als Wert setzen.

Dieses Script erwartet die Id des Iframes und setzt dessen Höhe auf die Höhe seines Contents. Dadurch sollte sich auch deine Wrappersuppe drumherum anpassen.
Die Funktion sollte erst gestartet werden, wenn der Inhalt des Iframes vollständig geladen ist.

Code:

function setIframeHeight(id) {
    var ifrm = document.getElementById(id);
    var doc = ifrm.contentDocument? ifrm.contentDocument : ifrm.contentWindow.document;

    ifrm.style.visibility = 'hidden';
    ifrm.style.height = 0;
    doc.getElementsByTagName("body")[0].style.height=0;
    doc.getElementsByTagName("html")[0].style.height=0;
    ifrm.style.height = document.getElementById(id).contentWindow.document.body.scrollHeight + "px";
    ifrm.style.visibility = 'visible';
    if(typeof document.getElementById(id).contentWindow.location.hash.split('#')[1] != "undefined" && document.getElementById(id).contentWindow.location.hash.split('#')[1] !=""){
        window.scrollTo(0,document.getElementById(id).contentWindow.document.getElementById(document.getElementById(id).contentWindow.location.hash.split('#')[1]).offsetTop+90);
    }
}

scbawik · 7 November 2014

pax schrieb:
Du könntest mit javascript die Höhe des Iframecontents abfragen und dies dynamisch als Wert setzen.

Dieses Script erwartet die Id des Iframes und setzt dessen Höhe auf die Höhe seines Contents. Dadurch sollte sich auch deine Wrappersuppe drumherum anpassen.
Die Funktion sollte erst gestartet werden, wenn der Inhalt des Iframes vollständig geladen ist.

Code:

function setIframeHeight(id) { var ifrm = document.getElementById(id); var doc = ifrm.contentDocument? ifrm.contentDocument : ifrm.contentWindow.document; ifrm.style.visibility = 'hidden'; ifrm.style.height = 0; doc.getElementsByTagName("body")[0].style.height=0; doc.getElementsByTagName("html")[0].style.height=0; ifrm.style.height = document.getElementById(id).contentWindow.document.body.scrollHeight + "px"; ifrm.style.visibility = 'visible'; if(typeof document.getElementById(id).contentWindow.location.hash.split('#')[1] != "undefined" && document.getElementById(id).contentWindow.location.hash.split('#')[1] !=""){ window.scrollTo(0,document.getElementById(id).contentWindow.document.getElementById(document.getElementById(id).contentWindow.location.hash.split('#')[1]).offsetTop+90); } }

Ich denke das wird aufgrund der Same-Origin-Policy nicht funktionieren.

pax · 7 November 2014

Hmm... wie war denn das? Wenn die Seite sich als iframe einbinden lässt, war der X-Header des Servers doch schon richtig konfiguriert. Bestimmt das nicht auch den Zugriff des Javascripts?
Ich habs gerade nicht parat, aber ich bin fast sicher, dass man auch das irgendwie mit 'nem Serverheader konfigurieren kann.

Anderenfalls gibt es noch ein paar schmutzige hacks mit extra-Iframes, aber da hab ich kein working example zur Hand.

soniXx123 · 8 November 2014

Was kostet mich das wenn mir jemand das ordentlich zaubert :)

djheke · 8 November 2014

Dein iFrame ist leider leer. Kannst du für Inhalt sorgen? Damit man was sieht. Du könntest mit viel Mühe und Fleiß die Sache mit PHP umsetzen. ist aber sehr aufwendig. Binn gerade am Probiern, aber ohne Inhalt wird das nix.

soniXx123 · 8 November 2014

es sollte inhalt dort sein.
Einfach mit dem Testlogin einloggen und die app öffnen.

Tronjer · 8 November 2014

Wo liegt eigentlich das Problem? Es ist doch gar nicht notwendig, den Content innerhalb des IFrames zu manipulieren. Reicht doch völlig, dem Attribut selber unterschiedliche werte für height zu geben. Das kann entweder per JS oder mit CSS Klassen geschehen.

Code:

.shadow_kings { height: 2800px };
.ein_anderes_game { height: 1500px };

soniXx123 · 8 November 2014

Wir werden nacher 100 von Games aber auch Seiten via iframe eingebaut haben wie Lieferheld etc.

Und daher muss eine lösung gefunden werden :(

Weil alle haben unterschiedliche größen, und ich möchte nur einen scrollbalken haben und keine 2

Tronjer · 8 November 2014

Du wirst beim dynamischen Auslesen der Height an der Cross-Origin-Policy scheitern. Theoretisch gäbe es einen Ansatz mit postMessage, praktisch wird das aber nicht funktionieren, weil du keinen Zugriff auf die Spiele-Seiten hast, sondern diese nur einbinden kannst.
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

Trotzdem ist es auch bei 100 Seiten keine schwere Aufgabe. Der einzige Aufwand besteht in einer händisch zu erstellenden "Zuordnungstabelle". Die könnte so aussehen:

Code:

var games = {
   'shadowkings': 2800,
   'andererTitel': 1500
}

// oder auch
var games = [
  { 'titel': 'shadow-kings', 'height': 2800 },
  { 'titel':  'andererTitel', 'height': 1500 }
]

Für die dynamische Zuweisung der Height als Inline-Style zum iFrame benötigst du den Titel, so, wie er im Objekt steht, und der lässt sich. aus der URL extrahieren. Dann schreibst du eine Schleife, die über die Collection iteriert und die Höhen zuweist. Das Pattern könnte so aussehen (nur als Beispiel, nicht copy&pasten):

Code:

var title = // der Spieletitel

$.each(games, function(key, value) {
  if ( key === title ) {
    $('iFrame').height(value);
  }
});

soniXx123 · 8 November 2014

Was kostet mich das wenn du mir das ordentlich machst :)

Tronjer · 8 November 2014

Stelle die Anfrage mal in der Jobbörse. Ich selber bin momentan ausgelastet.

djheke · 9 November 2014

Also mit diesem Beispiel funktioniert es mit php. Ob andere Siele so finktionieren weiß ich nicht.
http://www.gipspferd.de/forumhilfe/iframe.php

soniXx123 · 9 November 2014

Hey dann weis ich ja wer den ganzen morgen dort gebastelt hat gg

Ja da sieht es schon mal sehr schick aus :) das muss ich jetzt nur noch als fullscreen in meine seite ein bauen :( und das muss Repositive sein weil einige haben 1330x... und andere haben 1980x.... usw usw :(

iframe fullsize will net

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Neues Mitglied

pax

Guest

Neues Mitglied

pax

Guest

Senior HTML'ler

pax

Guest

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Aktives Mitglied

Neues Mitglied