iFrame PHP Javascript problem HELP!

[hamzatun]

Hallo Leutz,

Seit ein paar Tagen beschäftigt mich eine wichtige Sache.
Unzwar habe ich in einer Wordpress Seite einen iFrame eingebungen.

Die eingebundene Seite ist ebenfalls von mir und ist ein Kontaktforumular.
Wenn nun ein Desktop PC mit einer Bildschirmbreite >= 800px die Webseite besucht bleibt der auf der Hauptseite des iFrames.

Geht nun ein Handy auf die Seite mit einer Bildschirmbreite < 800px dann leitet das iFrame weiter und es kommt ein längliches Kontaktformular

Wenn man mit dem Handy die Webseite besucht ist alles Top. Doch wenn man auf Desktop drauf geht dann nutzt das Kontaktforumlar die nötigen 600px und den rest lässt Sie weiße luft frei.(siehe Bild)

script type="text/javascript">
  if (screen.width <= 800) {
    <?php $boolische = 1; ?>
  }
  else
  {
	  <?php $boolische = 2; ?>
  }
</script>
<?php 
	if( $boolische == 1)
	{
		$height = "1350px";
	}
	else
	{
		$height = "800px"
	}
?>	
<iframe src="jhttp://meinewebseite.de" width="800px" height="<?php echo $height ?>" scrolling="no">
</iframe>

[adistoe]

Dein Problem ist, dass du PHP nicht in JavaScript unterbringen kannst bzw. nicht vom JavaScript ausführen lassen kannst.
$boolische wird auf 1 und danach auf 2 gesetzt, egal was JavaScript macht.

Das liegt ganz einfach daran, dass PHP serverseitig beim laden der Seite ausgeführt wird und JavaScript clientseitig.

Evtl. hilft dir das Stichwort AJAX weiter, leider habe ich gerade keine Lösung bereit.

[hamzatun]

Wie bekomme ich denn so eine Fallunterscheidung mit der breite des Bildschirms nur mit PHP oder nur mit Javascript hin?

#push

[lnqlorlouz]

Originally Posted by hamzatun

Wie bekomme ich denn so eine Fallunterscheidung mit der breite des Bildschirms nur mit PHP oder nur mit Javascript hin?

In dem du Javascript von PHP trennst. Ich schaue mal ob ich meinen alten Code noch finde, dann kann ich den posten.

PHP Code:

<?php
// Damit die Funktion header-Location funktioniert
ob_start();
// Browsererkennungsfunktion einbinden
include('mobile.php');
// Browsererkennungsfunktion abrufen
$mobile_browser = find_mobile_browser();
// Cookies setzen (Benutzer möchte zur Desktop-Ansicht wechseln, hier wird der Cookie für eine Stunde gespeichert)
if(isset($_REQUEST['sessionview_desktop']))
{
  setcookie('sessionview', 'desktop', time() + 3600);
  header('Location: desktop.php');
}
// Cookies zerstören (Benutzer möchte doch wieder zur Mobile-Ansicht wechseln)
elseif(isset($_REQUEST['sessionview_mobile']))
{
  setcookie('sessionview', 'mobile', time() - 3600);
  header('Location: mobile.php');
}
?>

PHP Code:

         <?php
// Mobile-Ansicht
if($mobile_browser && $_COOKIE['sessionview'] != 'desktop')
{
  // CSS für Mobile-Ansicht
  echo 'mobilblabla';
}
else
{
  // CSS für Desktop-Ansicht
  echo 'desktopblabla';
}
?>

mobile.php

PHP Code:

<?php
function find_mobile_browser()
{
  if(preg_match('/(alcatel|android|blackberry|benq|cell|elaine|htc|iemobile|iphone|ipad|ipaq|ipod|j2me|java|midp|mini|mobi|motorola|nokia|palm|panasonic|philips|phone|sagem|sharp|smartphone|sony|symbian|t-mobile|up\.browser|up\.link|vodafone|wap|wireless|xda|zte)/i', $_SERVER['HTTP_USER_AGENT']))
  {
    return true;
  }
  else
  {
  return false;
  }
}
?>

Blabla. Musst halt irgendwie noch anpassen, hab den auf die Schnelle mal eben editiert.

[ComputerBaer]

So müsste es mit JavaScript aussehen, ich habe es jetzt nicht getestet.

<script type="text/javascript">
  var iframe = document.getElementsByTagName("iframe")[0];
  //var iframe = document.getElementById("meinIframe");
  if (screen.width <= 800) {
      iframe.height = 1350;
  }
  else
  {
      iframe.height = 800;
  }
</script>

Ich würde empfehlen deinem iframe eine id zu geben und dann die zweite Zeile zu nutzen und nicht die erste. Da Wordpress ohne iframes arbeitet sollte auch die erste Zeile funktionieren.

Edit:
Die beste Lösung wäre allerdings über CSS Media Queries, dann würde sich die Größe des iframes sogar anpassen wenn der Benutzer sein Browserfenster verkleinert/vergrößert.

<style type="text/css">
/* Mit Unterstützung von desolatorxxl */

@media screen and (max-width: 800px) {
    /* Betrifft alle iframes */
    iframe {
         height: 1350px
    }
    /* Betrifft nur die id */
    #meinIframe {
         height: 1350px
    }
}

@media screen and (min-width: 801px) {
    /* Betrifft alle iframes */
    iframe {
        height: 800px;
    }
    /* Betrifft nur die id */
    #meinIframe {
         height: 800px
    }
}
</style>

[hamzatun]

Vielen Dank ComputerBear , dein CSS Script hat auf anhieb funktioniert.

Da aber viele Leute dannach suchen würde ich den Thread Online lassen.

#thx #closed