Iframe bij form

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Landleven Tips

Landleven Tips

02/04/2013 16:09:06
Quote Anchor link
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?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<?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
Gewijzigd op 02/04/2013 16:22:55 door Landleven Tips
 
PHP hulp

PHP hulp

18/04/2024 22:51:42
 
Tim S

Tim S

02/04/2013 16:22:12
Quote Anchor link
Als ik het goed begrijp heb je hier wat aan:
http://corpocrat.com/2008/07/28/iframe-innerhtml-value-from-textarea/
 
Landleven Tips

Landleven Tips

02/04/2013 16:26:13
Quote Anchor link
Hallo Tim,

Ik zal er eens naar kijken. Dit wordt dan wel helaas morgen.
Gewijzigd op 02/04/2013 16:27:19 door Landleven Tips
 
Frank Nietbelangrijk

Frank Nietbelangrijk

02/04/2013 18:46:10
Quote Anchor link
voorlopig zie ik helemaal niets staan over een <textarea> in de broncode.

maar in het algemeen:
geef het element (in dit geval de textarea een uniek id: <textarea id="invoerveld">

en dan kun je zo het element benaderen en de content er uit vissen:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<script>
window.onload = function() {

    var textarea = document.getElementById('invoerveld');
    alert(textarea.innerHTML);

    var invoerveld = document.getElementById('textinput');
    alert(invoerveld.value);

}
</script>
</head>
<body>
<textarea id="invoerveld">bananen</textarea><br/>
<input type="text" id="textinput" value="appels" />
</body>
</html>
Gewijzigd op 02/04/2013 18:47:52 door Frank Nietbelangrijk
 
Landleven Tips

Landleven Tips

03/04/2013 09:56:29
Quote Anchor link
Hallo Frank,

Die code was ik inderdaad vergeten te posten. Hieronder staat hij dan:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>

<html>

<head>

<title>Editor</title>

<!-- COPYRIGHT  EDITOR 2013 - NIETS MAG GEKOPIERD WORDEN ZONDER TOESTEMMING. -->

<script type="text/javascript">



var editboxHTML =

'<html class="expand close">' +

'<head>' +

'<style type="text/css">' +

'.expand { width: 100%; height: 100%; }' +

'.close { border: none; margin: 0px; padding: 0px; }' +

'html,body { overflow: hidden; }' +

'</style>' +

'</head>' +

'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +

'<form class="expand close" name="f">' +

'<textarea class="expand close" style="background: #FFF;" name="ta" wrap="hard" spellcheck="false">' +

'</textarea>' +

'</form>' +

'</body>' +

'</html>';



var defaultStuff = 'Type hier uw HTML code of maak er een.';





var extraStuff = '';



var old = '';

        

function init()

{

  window.editbox.document.write(editboxHTML);

  window.editbox.document.close();

  window.editbox.document.f.ta.value = defaultStuff;

  update();

}



function update()

{

  var textarea = window.editbox.document.f.ta;

  var d = dynamicframe.document;



  if (old != textarea.value) {

    old = textarea.value;

    d.open();

    d.write(old);

    if (old.replace(/[rn]/g,'') == defaultStuff.replace(/[rn]/g,''))

      d.write(extraStuff);

    d.close();

  }



  window.setTimeout(update, 150);

}



</script>

</head>

<frameset resizable="yes" rows="50%,*" onload="init();">

  <frame name="editbox" src="javascript:'';">

  <frame name="dynamicframe" src="javascript:'';">

</frameset>



</html>


Het probleem is dat de inhoud in de editboxHTML moet worden opgeslagen. Dit bestand wordt in een iframe gezet zoals bij regel 34 te zien is bij mij 1ste reactie.

Ik heb het geprobeert met jullie voorbeelden maar dit gaf niet het gewenste resultaat. De tekst die in de editboxHTML staat moet namelijk kunnen worden opgeslagen via PHP in het script van mij 1ste reactie. Daar zit het probleem.

Ik hoop dat dit voldoende informatie is.
Gewijzigd op 03/04/2013 09:59:06 door Landleven Tips
 
Erwin H

Erwin H

03/04/2013 10:07:49
Quote Anchor link
Elementen binnen een iframe kan je niet zomaar benaderen als andere elementen op je pagina. Komt de source van een iframe van buiten je domein dan kan het zelfs helemaal niet (maar ik neem aan dat dat hier niet het geval is).

Antwoord hoe het wel kan staat hier: http://stackoverflow.com/questions/1088544/javascript-get-element-from-within-an-iframe#
 
Landleven Tips

Landleven Tips

03/04/2013 10:35:12
Quote Anchor link
Hallo Erwin,

Ik heb het toegepast in mij script en vervolgens in een alert gezet. Het probleem is dat ik geen alert krijg, kunt u vinden waardoor? Ik in de editboxHTML de textarea het id gegeven: 'textareainhoud'.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?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" id="iframewindow"></iframe>
    <script type="text/javascript">
        var iframe = document.getElementById('iframewindow');
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        var testge innerDoc.getElementById('textareainhoud').value;
        
        alert(testge);
    </script>

    <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>



    </body>
</html>
Gewijzigd op 03/04/2013 10:35:31 door Landleven Tips
 
Erwin H

Erwin H

03/04/2013 10:53:35
Quote Anchor link
Quote:
var testge innerDoc.getElementById('textareainhoud').value;

Misschien nog even een = teken tussen?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var testge = innerDoc.getElementById('textareainhoud').value;
 
Landleven Tips

Landleven Tips

03/04/2013 11:10:24
Quote Anchor link
Hallo Erwin,

Nu krijg ik wel een alert alleen krijg ik null wat betekent dat het element leeg is. De javascript code is geworden:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<script type="text/javascript">
        var iframe = document.getElementById('iframewindow');
        var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
        var testge = innerDoc.getElementById('textareainhoud');
        
        alert(testge);
    </script>

Als ik achter de textareainhoud .value zet krijg ik namelijk geen alert meer..

Ik zou het op prijs stellen, als u mij wilt helpen ben namelijk niet goed in javascript maar meer in PHP.
 
Erwin H

Erwin H

03/04/2013 11:24:27
Quote Anchor link
Dat null komt omdat de functie 'getElementById' geen element met betreffende id kan vinden (en daardoor kan je dus ook niet het value ervan krijgen).
De reden dat er geen element gevonden kan worden is simpelweg omdat je helemaal geen id hebt gegeven aan je textarea (en dus zeker niet het id 'textareainhoud'). Dat zal je dus nog even moeten doen.
 
Landleven Tips

Landleven Tips

03/04/2013 11:34:34
Quote Anchor link
Hallo Erwin,

Dit heb ik degelijk gedaan. Hieronder nogmaals convert.html (een deel ervan)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<script type="text/javascript">



var editboxHTML =

'<html class="expand close">' +

'<head>' +

'<style type="text/css">' +

'.expand { width: 100%; height: 100%; }' +

'.close { border: none; margin: 0px; padding: 0px; }' +

'html,body { overflow: hidden; }' +

'</style>' +

'</head>' +

'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();" id="body">' +

'<form class="expand close" name="f">' +

'<textarea id="textareainhoud" style="background: #FFF; width: 100% height: 100%; border: none; margin 0px; padding: 0px;" name="ta" wrap="hard" spellcheck="false">' +

'</textarea>' +

'</form>' +

'</body>' +

'</html>';

var defaultStuff = 'Type hier uw HTML code of maak er een.';
var extraStuff = '';
var old = '';

function init() {
 window.editbox.document.write(editboxHTML);
 window.editbox.document.close();
 window.editbox.document.f.ta.value = defaultStuff;
 update();
}


Ik heb ook al gekeken of de id's kloppen met elkaar. En dat klopt. Waardoor komt het dat er null uitkomt?

Edit: Als ik er editboxHTML bij zet komt er ook geen alert.
Gewijzigd op 03/04/2013 11:47:59 door Landleven Tips
 
Erwin H

Erwin H

03/04/2013 11:57:28
Quote Anchor link
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

Landleven Tips

03/04/2013 13:12:39
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?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>
Gewijzigd op 03/04/2013 13:24:22 door Landleven Tips
 
Erwin H

Erwin H

03/04/2013 13:25:55
Quote Anchor link
Twee hele kleine voorbeeld html-etjes. Dit werkt:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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"):
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<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.
Gewijzigd op 03/04/2013 13:26:31 door Erwin H
 
Landleven Tips

Landleven Tips

03/04/2013 13:37:29
Quote Anchor link
Hallo Erwin,

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

Erwin H

03/04/2013 14:26:04
Quote Anchor link
Je moet niets, ik heb je alleen een werkend voobeeld gegeven (werkend op mijn pc in FF).
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.