0

I have an HTML textarea, and an IFrame. On a button click, I would like to be able to load the content of the textarea into the IFrame.

For example, when the user types in Hello World into the textarea, and presses the submit button, the text Hello World would show up in the IFrame.

Any ideas on how this could be done? Thanks in advance.

NOTE: I would like to use JQuery, but I think I'll have to use PHP for this. It sounds more server side.

user2228462
  • 589
  • 1
  • 5
  • 14
  • I believe the only caveat to this, is that you would first have to have an empty iframe page, like `empty.html`, which would consist of an `` tag...I may be wrong. As long as the iframe is then on the same server, you can access the contents and inject whatever html you want. – Ohgodwhy Apr 30 '13 at 04:48

2 Answers2

0
var content = $("#myTextarea").val();
$('#myIframe').contents().find('html').html(content);

(edit) ...and #myIframe should initially be:

<html></html>
Tasos Bitsios
  • 2,699
  • 1
  • 16
  • 22
  • Currently, that's not working. I made a function called inject, and put your code into it. I then made a form, and submit button which called that function. – user2228462 Apr 30 '13 at 05:10
  • Oh - make sure the iframe is pointing to a document on the same domain as your outer html, or you'll won't be allowed to edit the iframe. – Tasos Bitsios Apr 30 '13 at 05:25
0

You can target the iframe with jquery only:

<html>
<head>
   <script type="text/javascript">
   jQuery(document).ready(function() {
      jQuery('#btnSubmit').click(function () {
         var content = $("#test").val();
         $('#iframe1').contents().find('p').html(content);
      });
   });
   </script>
</head>
<body>
   <textarea name="test" id="test" rows="5" cols="40"></textarea>
   <button id="btnSubmit">Post to iFrame</button>
   <iframe name="iframe1" id="iframe1" src="test2.html"></iframe>
</body>
</html>

Your iframe content page, in this case "test2.html" would have something like this:

<html>
<body>
  <p>[intro text or whatever]</p>
</body>
</html>

Here is a previous S/O post with a similar issue: Selecting an element in iFrame jQuery

Community
  • 1
  • 1
Revent
  • 2,091
  • 2
  • 18
  • 33
  • You're right, doesn't seem to like the body tag in find. But if I change that to `.find('p')`, it works as shown here: http://www.reventsoftware.com/test1.html, you can probably use a div instead of p if you prefer. – Revent Apr 30 '13 at 05:58