Inject Javascript from a textarea into an Iframe 2

Asked Jan 08 '15 at 13:34

Active Jan 08 '15 at 13:37

Viewed 114 times

I have made a playground

It takes HTML/CSS/JS from textareas and injects them into an Iframe. I had a problem in inserting JS.

I went to this site Inject Javascript from a textarea into an Iframe (my code is exactly the same from net tuts+) but I wasn't able to understand

Here is my code:

(function() {
$('.grid').height( $(window).height() );    
var contents = $('iframe').contents(),
    body = contents.find('body'),
    styleTag = $('<style></style>').appendTo(contents.find('head')),
    scriptTag = $('<script></script>').text($('.js').val()).appendTo(contents.find('head'));
$('textarea').keyup(function() {
    var $this = $(this);
    if ( $this.attr('id') === 'html') {
        body.html( $this.val() );
    } 
    if ( $this.attr('id') === 'css') {
        styleTag.text( $this.val() );
    }
});
})();

Can someone help me

edited May 23 '17 at 10:33

Community

asked Jan 08 '15 at 13:34

Palash Sharma

Is the keyup event fired? I meant, do you call this snippet once elements are available in the DOM? – A. Wolff Jan 08 '15 at 13:42
The html and css work on keyup so it should be working – Palash Sharma Jan 08 '15 at 13:43
Is `$('.js').val()` returning expected result? Anyway, you'd have better to provide online sample which replicates your issue – A. Wolff Jan 08 '15 at 13:45
I have uploaded it online to [link](http://palash.comeze.com/) – Palash Sharma Jan 08 '15 at 13:52
I tried using `$('#js').val()` it still didn't work – Palash Sharma Jan 08 '15 at 13:56
I tested your link on chrome, seems to work as expected, the js is evaluated – A. Wolff Jan 08 '15 at 13:57
Could you tell me the code you used – Palash Sharma Jan 08 '15 at 13:59
`
ok
` Oops sory, i was setting it in HTML tab, i'm trying js tab now – A. Wolff Jan 08 '15 at 14:00
Ya but the code wasn't in the js textarea – Palash Sharma Jan 08 '15 at 14:01
You would need to scroll down in the sidebar – Palash Sharma Jan 08 '15 at 14:03
You could suggest any other way to inject javascript if it there is any – Palash Sharma Jan 08 '15 at 14:07
As long as it works on the html elements – Palash Sharma Jan 08 '15 at 14:08
I'm currently trying to understand your issue, i mean debug it. It looks like you should handle exception will typing and use `styleTag.html( $this.val() );` – A. Wolff Jan 08 '15 at 14:10
sorry for the long delay... So checking, it appears you need to reappend script tag to reevaluate its content on each keyup. I finally came to this solution: http://jsfiddle.net/cowg850e/3/ – A. Wolff Jan 08 '15 at 15:27
I'm sorry that didn't work – Palash Sharma Jan 09 '15 at 08:28
What didn't work? The jsFiddle seems to work as expected – A. Wolff Jan 09 '15 at 10:56
All changes are being done to the html page, Not the iframe. – Palash Sharma Jan 10 '15 at 10:44
can you provide example? – A. Wolff Jan 10 '15 at 10:46
I'm not sure but I only want it to work on my iframe – Palash Sharma Jan 10 '15 at 10:47
For example I want it to click a button in the iframe. The button onclick function doesn't work – Palash Sharma Jan 10 '15 at 10:48
could you suggest me any method without keyup that will only work in an iframe and supports all the elements created in iframe #document – Palash Sharma Jan 10 '15 at 10:49

Inject Javascript from a textarea into an Iframe 2

0 Answers0