Iframe bij form

Door Landleven Tips op 02-04-2013 16:09 gewijzigd op 02-04-2013 16:22

3.744 views

Hallo,

Mijn klant heeft een iframe waarin 2 textareas staan, 1 textarea in javascript staat, en de ander gewoon in HTML die hij vervolgens vernieuwd via javascript. Het is namelijk een HTML editor.

Het probleem is dat hij de gegevens die in textarea 1 wil kunnen opslaan. Mijn probleem is hoe kom ik nou bij de content van textarea 1 om vervolgens die op te slaan.

Edit: Het gaat hier om regel 32, in dat bestand staan de textareas.
Hoe kan ik dit het beste oplossen?

<?php include '../html/includes/data_compleet.php'; ?>

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Editor - HTML verwerker</title> 

<link href="http://www.google.nl/intl/nl/services/css/default.css" rel="stylesheet"> <!-- Blauwe button -->
<link href="style.css" rel="stylesheet"> <!-- Medals en gewone CSS -->


<script>
<!--
if (window!= top)
top.location.href=location.href
// -->
</script> <!-- Anti-iframe script -->

</head> 
<body onload="begin('tec/begin.html'); return false;" class="icoMr">

<div style="position:absolute; margin:.8em; bottom:0em; right:0em; font-family:verdana;font-size:13px;">
<a style="margin-top:20px;" class="maia-button" data-g-action="Editor" data-g-event="Editor" data-g-label="Editor" href="#" onclick="forum('forum/index.php'); return false;">Forum</a>
<?php 
	if(isset($_SESSION['user_id']) === true) {
		echo '<a style="margin-top:20px; margin-right: 3px; " class="maia-button" data-g-action="Editor" data-g-event="Editor" data-g-label="Editor" href="#" onclick="account(\'ingelogt/welkomscreen.php\'); return false;">Account</a>';
		echo '<a href="ingelogt/logout.php" class="maia-button">Log uit</a>';
	} else {
		echo '<a style="margin-top:20px; margin-right: 3px; " class="maia-button" data-g-action="Editor" data-g-event="Editor" data-g-label="Editor" href="#" onclick="account(\'account/login.php\'); return false;">Login</a>';
	}
?>
</div>
	<iframe name="c" src="tec/converter.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="90%" scrolling="auto"></iframe>
	<script type="text/javascript" lang="javascript" src="http://deseloper.org/examples/modal-simple/jquery-1.2.3.js"></script>

	<script type="text/javascript" lang="javascript" src="http://deseloper.org/examples/modal-simple/modal-window.js"></script>



	<script type="text/javascript" lang="javascript">

	var begin = function(source)

	{

		modalWindow.windowId = "begin";

		modalWindow.width = 700;

		modalWindow.height = 400;

		modalWindow.content = "<iframe width='700' height='400' frameborder='0' scrolling='no' src='" + source + "'>&lt/iframe>";

		modalWindow.open();

	};

	var forum = function(source)

	{

		modalWindow.windowId = "forum";

		modalWindow.width = 900;

		modalWindow.height = 500;

		modalWindow.content = "<iframe width='900' height='600' frameborder='0' scrolling='no' src='" + source + "'>&lt/iframe>";

		modalWindow.open();

	};

	var account = function(source)

	{

		modalWindow.windowId = "account";

		modalWindow.width = 600;

		modalWindow.height = 400;

		modalWindow.content = "<iframe width='600' height='400' frameborder='0' scrolling='no' src='" + source + "'>&lt/iframe>";

		modalWindow.open();

	};	
	</script> 
</body> 
</html>

Eidt: Het gaat hier om regel

Erwin H

03-04-2013 11:57

Waarschijnlijk dan het standaard euvel dat op het moment dat je javascript uitgevoerd wordt, de pagina in het iframe nog niet geladen is. Daardoor kan hij wel het iframe vinden (dat wordt geladen voor de javascript), maar niet de inhoud (omdat dat op dat moment nog aan het laden is).
Je zal dus moeten wachten tot de iframe inhoud volledig geladen is voor je dat textarea kan aanroepen. Als je de code vanuit een onclick van een button aanroept zal het waarschijnlijk wel werken.

Landleven Tips

03-04-2013 13:12 gewijzigd op 03-04-2013 13:24

Hallo Erwin,

Ik heb het nu in een kleine functie gemaakt en vervolgens met een <button></button> (even voor de test) verbonden. Helaas krijg ik dan alsnog dezelfde melding namelijk null. Ik vermoed dat ik de klant teleur moet stellen, door te zeggen dat het niet kan. Of iemand anders moet nog een idee hebben wat misschien zou werken.

In ieder geval bedankt voor het helpen!

hieronder nogmaals de code:

<?php include '../Editor_Woelmuis/includes/data_compleet.php'; ?>

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Editor - HTML verwerker</title> 
<link href="http://www.google.nl/intl/nl/services/css/default.css" rel="stylesheet"> <!-- Blauwe button -->
<link href="style.css" rel="stylesheet"> <!-- Medals en gewone CSS -->


<script>
<!--
if (window!= top)
top.location.href=location.href
// -->
</script> <!-- Anti-iframe script -->

<script type="text/javascript">
	function iframecontent() {
		var iframe = document.getElementById('iframewindow');
		var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
		var testge = innerDoc.getElementById('textareainhoud');
		
		alert(testge);
	};
	</script>
	
</head> 
<body onload="begin('tec/begin.html'); return false; " class="icoMr">

<div style="position:absolute; margin:.8em; bottom:0em; right:0em; font-family:verdana;font-size:13px;">
<a style="margin-top:20px;" class="maia-button" data-g-action="Editor" data-g-event="Editor" data-g-label="Editor" href="#" onclick="forum('forum/index.php'); return false;">Forum</a>
<?php 
	if(isset($_SESSION['user_id']) === true) {
		echo '<a style="margin-top:20px; margin-right: 3px; " class="maia-button" data-g-action="Editor" data-g-event="Editor" data-g-label="Editor" href="#" onclick="account(\'ingelogt/welkomscreen.php\'); return false;">Account</a>';
		echo '<a href="ingelogt/logout.php" class="maia-button">Log uit</a>';
	} else {
		echo '<a style="margin-top:20px; margin-right: 3px; " class="maia-button" data-g-action="Editor" data-g-event="Editor" data-g-label="Editor" href="#" onclick="account(\'account/login.php\'); return false;">Login</a>';
	}
?>
</div>
	<iframe name="c" src="tec/converter.html" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="90%" scrolling="auto" id="iframewindow"></iframe>
	<button onclick="iframecontent();" value="Laad javascript">Testerdetest</button>

	<script type="text/javascript" lang="javascript" src="http://deseloper.org/examples/modal-simple/jquery-1.2.3.js"></script>

	<script type="text/javascript" lang="javascript" src="http://deseloper.org/examples/modal-simple/modal-window.js"></script>

	</script> 
</body> 
</html>

Erwin H

03-04-2013 13:25 gewijzigd op 03-04-2013 13:26

Twee hele kleine voorbeeld html-etjes. Dit werkt:


<html>
  <head>
    <script type="text/javascript">
      function iframecontent() {
        var iframe = document.getElementById('iframe_test');
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        var testge = innerDoc.getElementById('iframe_textarea').value;
        
        alert(testge);
      }
    </script>
  </head>
  <body>
    <iframe src="iframe_test_child.html" id="iframe_test"></iframe>
    <input type="submit" onclick="iframecontent();" value="click me">
  </body>
</html>

Pagina in het iframe ("iframe_test_child.html"):


<textarea id="iframe_textarea">bla bla bla</textarea>

Laad de eerste, zorg dat de tweede in de zelfde directory staat, klik op de knop en je krijgt de tekst uit het iframe.

Landleven Tips

03-04-2013 13:37

Hallo Erwin,

Dus ik moet een nieuw bestand aanmaken, met iframe_test_child.html en daarin de textarea met iframe_textarea plaatsen?

Erwin H

03-04-2013 14:26

Je moet niets, ik heb je alleen een werkend voobeeld gegeven (werkend op mijn pc in FF).

Reageren

Inloggen om te reageren