Zum Inhalt springen

iframe inhalt nach div

forTeesSake

Von forTeesSake
in Webdesign

 Teilen

Empfohlene Beiträge

forTeesSake

forTeesSake

Geschrieben
Geschrieben

hi und hallo.

ich habe eine datei mit einem <iframe> dieses hat anfangs keinen inhalt und ist nicht sichtbar.

dann habe ich noch ein <p> element das also container für den (späteren)inhalt des <iframe> dient

beim klick auf einen link soll die src des <iframe> aktualisiert werden und der inhalt in das <p> geschrieben werden.

leider geht das nicht so wie ich will, denn man muss immer zweimal auf den link klicken.

offensichtlich lädt er beim ersten mal die neue src ins <iframe> und erst beim zweiten mal wird der content des <iframe> in das <p> geschrieben....

hat jemand ne ahnung wie man das machen kann, dass schon beim ersten klick der inhalt ins <p> geschrieben wird???

hier der quellcode


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>

<head>

	<title>Untitled</title>

</head>


<body>

<iframe name="srcFrame" src="" style="display:none"></iframe>

<br><br><br><a href="#" onClick="document.srcFrame.document.location.replace('someData.html');dynFrame.innerHTML = document.srcFrame.document.body.innerHTML;">doit</a>


<p id="dynFrame" style="position:absolute;top:100px;left:0px;"></p>



</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen
etreu

etreu

Geschrieben
Geschrieben

einfacher:



<script type="text/javascript">

function getStyle(name) {

// für IE

return document.getElementById(name).style;

// für gecko

return document.getElementById;

}


function updateFrame(url) {

parent.dynFrame.location = url;

getStyle("dynLayer").display = "block";

}

</script>


<div style="display:none">

  <iframe src="leer.htm" name="dynFrame"></iframe>

</div>


<a href="javascript:updateFrame('neueSeite.htm');" >hier klicken</a>[/PHP]

Link zu diesem Kommentar
Auf anderen Seiten teilen
forTeesSake

forTeesSake

Geschrieben
  • Autor
Geschrieben

bitte lies nochmal die frage durch wenn du lust hast. es geht weder darum ein <iframe> einzublenden, noch darum das <p> zu positionieren. das klappt alles schon.

es geht vielmehr darum im (versteckten) <iframe> dynamischen content beim klick auf einen link zu laden, da ich die SRC des <iframes> ja ändern kann.

das <p> bekommt dann den inhalt des <iframe>

z.b.

<p> leer

<iframe src> leer

klick auf den link

-> <iframe src> ändert sich zu egal.html

-> <p> innerhtml wird auf den <iframe> inhalt, also den quelltext von egal.html, geändert.

so und das passiert für jeden link im dokument.

nur leider muss ich immer ZWEIMAL auf den link klicken damit sich was tut, also <iframe> src geändert UND <p> innerhtml geändert...

hoffe jetzt ist verständlich

Link zu diesem Kommentar
Auf anderen Seiten teilen
kills

kills

Geschrieben
Geschrieben

Ich denke, dass es an der verzögerung liegt, bis dein iframe den content geladen hat!

Versuchs ma so:

Ist ungetestet!



function getElement( ElementId) {

  if ( document.all) return document.all[ElementId];

  if ( document.layers) return document.layers[ElementId];

  if ( document.images) return document.images[ElementId];

  if ( document.getElementById) return document.getElementById( ElementId);

}


function reloadContent( DestinationDivId, SourceIFrameId, url) {

  var oIframe = getElement(iFrameId);

  var oDiv = getElement(DestinationDivId);

  oIframe.document.location.replace(url);


  var sFrameContent = "";

  do {

    sFrameContent = oIframe.document.body.innerHTML;

  } while ( sFrameContent == null || sFrameContent == "");


  oDiv.innerHTML = sFrameContent;


}

[/PHP]

[PHP]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<iframe name="srcFrame" src="" style="display:none"></iframe>
<br><br><br><a href="#" onClick="reloadContent( 'dynFrame', 'srcFrame', 'someData.html');">doit</a>

<p id="dynFrame" style="position:absolute;top:100px;left:0px;"></p>


</body>
</html>

Beachte:

Das mit dem innerHTML geht meines wissens nur bei IE!

Link zu diesem Kommentar
Auf anderen Seiten teilen
kills

kills

Geschrieben
Geschrieben

hat mein Ansatz so funkioniert?

poste ma bitte den code von dir, falls du noch anpassungen vorgenommen hast!

Alternativ dazu ist mir noch eingefallen:

Anstatt eines iframes kannst du auch ein normales frameset nehmen.

machst einfach 2 frame, den einen 100% den anderen 0px.

dann in dem 0px frame den content reinladen und per JavaScript in den anderen holen.

ich glaube wenn du anstatt von "innerHTML" "innerText" nehmen würdest, wäre das ganze browserunabhängig!

Link zu diesem Kommentar
Auf anderen Seiten teilen
kills

kills

Geschrieben
Geschrieben

Ist getestet und geht im IE !!

anpassungen für NS musste halt noch reinmachen!

frame.htm:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

   "http://www.w3.org/TR/html4/frameset.dtd">

<html>

<head>

<title>Text des universellen Titels</title>

</head>

<frameset cols="0,*">

  <frame src="" id="Dummy">

  <frame src="test.htm" name="Main">

  <noframes>

    Ihr Browser kann diese Seite leider nicht anzeigen!

  </noframes>

</frameset>

</html>
test.htm: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>

<head>

    <title>Untitled</title>

<script language="javascript">

var vbDOMtype = '';

if (document.getElementById)

{

	vbDOMtype = "std";

}

else if (document.all)

{

	vbDOMtype = "ie4";

}

else if (document.layers)

{

	vbDOMtype = "ns4";

}


var vBobjects = new Array();

function fetch_object(idname, forcefetch)

{

	if (forcefetch || typeof(vBobjects[idname]) == "undefined")

	{

		switch (vbDOMtype)

		{

			case "std":

			{

				vBobjects[idname] = document.getElementById(idname);

			}

			break;


			case "ie4":

			{

				vBobjects[idname] = document.all[idname];

			}

			break;


			case "ns4":

			{

				vBobjects[idname] = document.layers[idname];

			}

			break;

		}

	}

	return vBobjects[idname];

}


function reloadContent( oDestinationDiv, oSourceIFrame, url) {

   oSourceIFrame.location.replace(url);


   var sFrameContent = "";

   do {

      sFrameContent = oSourceIFrame.document.body.innerText;

   } while ( sFrameContent == "");


   oDestinationDiv.innerText = sFrameContent;


}

</script>

</head>


<body>

<br><br><br><a href="javascript: reloadContent( fetch_object('dynFrame'), self.parent.Dummy, './someData.html');">doit</a>


<p id="dynFrame" style="position:absolute;top:100px;left:0px;"></p>



</body>

</html>

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...