postmessages zur server zu server kommunikation?

sten76

Grünschnabel
Hallole,

ich möchte gerne ein Iframe in meine Webseite einbinden. Ich verwalte sowohl die Webseite des Iframe als auch die Webseite in das es eingebunden werden soll.
Jetzt möchte ich gerne von dem Iframe aus die Höhe senden .. an die übergeordnete Webseite (in der das Iframe eingebunden ist). Problematik dabei, das Iframe liegt auf einem anderen Server (also anderen Domain).

Geht das..?
Habe schon alles mögliche probiert scheitere jedoch an der SOP.

Jetzt habe ich gegoogled und grade eine Möglichkeit via postMessages gefunden..
sowie ich das sehe geht das nur mit ab IE8 und den neuen Firefoxen...oder?

Das Ganze ist ein wenig kompliziert.
Vorliegend ist ein CMS das auf einem Server a läuft, in diesem wird ein Formular eingebunden, das wiederum auf einem anderen Server b läuft und dieses Formular sendet Daten an einen dritten Server c (auf dem eine DB läuft).

Mir ist nix anderes eingefallen als ne Möglichkeit mit einem Iframe (vorerst).

..Warum alles auf verschiedenen Servern läuft - hat technische Gründe. Leider habe ich kein PHP zur Verfügung daher mein Versuch das Ganze mit postMessages..

Die Frage ist, gibt es ne andere Möglichkeit.. oder habt ihr Tipps für mich..
 
Zuletzt bearbeitet:
Bitte achte in Zukunft auf Groß- und Kleinschreibung.

postMessage ist genau das, was du suchst. Die Browseruntersützung für solche Features kannst du auf dieser Seite hervorragend herausfinden: http://caniuse.com/#search=postmessage

Falls dir IE8 nicht reicht, musst du dir etwas anderes suchen.
Auch wenn es verschiedene Server sind, hast du die Möglichkeit alle über die gleiche Domain, aber mit verschiedenen Subdomains laufen zu lassen? Also a.example.com, b.example.com und c.example.com? Dann gäbe es noch eine weitere Möglichkeit über das IFrame zu kommunizieren, in dem du die document.domain Eigenschaft überschreibst.

Eine dritte Variante mit dem IFrame wäre "Hash polling". Aber das hat dann auch Nachteile. http://softwareas.com/cross-domain-communication-with-iframes


Also am Besten wäre postMessage, aber falls IE < 8 wichtig ist, dann wäre es gut das über Subdomains zu machen. Das sollte ja mittels entsprechender DNS Einträge kein Problem sein.
 
So meine gefundene* Realisierung mit kleineren Anpassungen, testweise via Iframe.
Im Code des Iframe (eingebunde Webseite):

PHP:
//js-datei:
function iframeheight()
{
    function postSize(e){  
      var target = parent.postMessage ? parent : (parent.document.postMessage ?      
      parent.document : undefined);  
      if (typeof target != "undefined" && document.body.offsetHeight)  
       target.postMessage(document.getElementById("eingabe").offsetHeight, "*");  
      //change this star to your domain for more security  
    }  
     if (window.addEventListener){  
          window.addEventListener("load", postSize, false);  
        } else {  
          window.attachEvent("load", postSize);//for ie  
        }  
}

HTML:
<form name="eingabe" id="eingabe" action="{$URL}" method="get">
..
</form>//des eingebundene formular

<script type="text/javascript">iframeheight();</script>

------
Seite bei der das Iframe eingebunden wird:

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script type="text/javascript" src="jquery.js" language="JavaScript"></script>
    </head>
    <body style="background-color: orange">
       <h1 style="color: white">New Web Project Page</h1>
	   <script type="text/javascript">
			$(function() {
				  
				var ua = $.browser;  
			 	if ( ua.msie && ua.version.slice(0,3) == ("7.0") || ua.msie && ua.version.slice(0,3) == ("6.0")) 
			 	{  
			 	 var b = $("#iframe").remove().empty();
			     var c = '<iframe src="http://localhost/test/test.xyz" style="width:525px; height:870px" id="iframe" frameborder="no" scrolling="no"></iframe>';  
			     $('#iframe_holder').append(c); //nix anderes als wenn IE7 dann bei div anhängen...
				}
			}) 
			 
			function receiveSize(e)
			{ //alert(e.data);
				if (e.origin === "http://localhost") 
					$("#iframe").attr('height', e.data);
				var b = $("#iframe").height() + 20;
				$("#iframe").attr('height', b); 
			}  
			  
			if (window.addEventListener){  
			        window.addEventListener("message", receiveSize,false);  
			    } else {  
			        window.attachEvent("onmessage", receiveSize);
			    }  
		</script>      

		<iframe id="iframe" style="background-color:white; color: black; padding-left:10px" src="http://localhost/test/test.xyz" frameborder="no" width="540" height="540" scrolling="no"></iframe>
		<div id="iframe_holder"></div>  
   	</body>     
</html>

zum Testen (wg zwei unterschiedliche Domains) habe ich zwei Webserver laufen.
Den anderen auf port:9090 (die seite die das frame aufruft)

Jetzt hab ich das Problem das Firefox die Höhe des Iframes anpasst aber der IE8 nicht...
wenn ich das alert in der Funktion receiveSize(e) ausführe Kommtarzeichen weg)
dann führt der Firefox das alert einwandfrei aus und gibt mir die Höhe in px , der IE8 nicht!
heißt der IE8 führt die Funktion nicht mal aus. Sollte doch gehen bei IE8 oder?

hab ich etwas übersehen?

ps. achja Bei alle anderen Browsern.. Opera, Safari funktioniert das Ganze natürlich auch...
*wenn ich nur die Seite wieder finden würde mit dem Snipset.. :(
 
Zuletzt bearbeitet:
Im IE wird kein event Objekt übergeben, sondern du musst auf window.event zurückgreifen. Das hat aber mit dem postMessage nichts zu tun, sondern ist eine bekannte IE Eigenschaft.

Javascript:
function receiveSize(e)
{
    e = e || window.event;
    
    //Dein Code
}
 

Neue Beiträge

Zurück