Mihai asks:
I'm having trouble reading the contents of an iframe with jQuery. I have a Rich Text Editor (MceEdit) that dynamically generates an iframe that holds al the styled text until sumbit. Only then, it populates the textarea that gets POSTed to the server. What I want to do, is read the content of the iframe before submit, so I can send to the server via AJAX. (I'm trying to implement an autosave feature). I've already tried something like $('iframe').contents() or $('iframe').contents().html() but it doesn't work.
It looks like you were real close. The contents() method of jQuery is exactly what you want to use. The docs even specifically mention it being the one to use for iframes. Here is the demo I came up. I began without any code, just some simple html.
})
</script>
</head> <body> <input type="button" id="testBtn" value="Click to read"> <iframe src="test2.cfm" id="testFrame"></iframe>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
Ok I lie - there is a bit of code - the document ready block, but it's not doing anything yet. Now let's look at test2.cfm:
<form>
<textarea id="content" cols="20" rows="20">
</textarea>
</form>
So far so good. Now let's make that button actually do something. Here is what I added:
$("#testBtn").click(function() {
var text = $("#testFrame").contents().find("#content").val();
console.log(text);
});
So as I said, contents() was what you wanted. I just tie to that a find() command to get my textarea and then use a val() to get the value. If you want to try this, click the button below, and please note I make use of console. If your browser doesn't support console this demo will not work. It should be obvious that the concept still works cross platform if you remove the console call.
Archived Comments
if you're using tinymce, you might like this:
http://tinymce.moxiecode.co...
Thanks for your help, Ray. While I was waiting for your answer, I did some more research. It turns out, tinyMce offers a convenient function in it's API. if you call tinyMCE.triggerSave(); it populates the textarea as it would on submit, and then you can read the contents of it as you normally would. Just thought I'd drop this tip. Needles to say, this only works with tinyMce. Any other editor, that doesn't offer this kind of function would have to be read as you described in the article.
Just wanted to note that this will only work if the URL loaded in the iFrame resides on the same domain or else XSS rules apply
Good point - thanks.
In the jQuery cookbook, they suggest putting the JavaScript code just before the /body. That way you don't have to call $(document).ready.
At first I thought this was a nit-pick, but I find myself doing it more and more.
It helps me feel like I have more control for some reason - like I understand what in the h I'm doing.
I prefer $(document).ready as it just feels much more obvious.
Your probably right, but what do you do when your working via templates? You need a bit of jquery in a page, and it doesn't make sense to go into the layout page and write the code before the body...
THe thing is - you can put $(document).ready _anywhere_. So given foo.cfm is some view I just put it on top. So it "feels" right even though in the final HTML output it is within a DIV perhaps. It still works fine too.
Yeah, I think its really just a matter of coding style. Personally I like the consistency in using $(document).ready and it's very literal in describing what your doing.
Can you have multiple $(document).ready function calls on a page? Just wondering because I've got a page with a couple different jquery plugins, each requiring code to be added in $(document).ready ()
Yes, whic is one more reason I love the feature.