Using textareas to display live results in iframe, using jQuery, add separate textarea input into iframes head

Question

I have created two text areas. one for HTML and one for CSS input. Each have their own IDs. Using a tutorial I've found online, I was able to have these textareas take a users input and display it in an iFrame in real time.

Then I was able to write some jQuery, which takes the users input from the textarea with an ID of HTML , and adds it to the iFrames BODY tags, therefor emulating HTML in the iFrame as a live preview. Also, the jQuery uses boolean to detect if there is user input in a textarea without the ID of html (in this case a textarea with an ID of css), it then inserts the input into the HEAD of the iFrame inside of a STYLE tag, therefor adding CSS to the iframe's head. in its own style tag, and allowing the user to produce a live output of their CSS and HTML inside of the iFrame. Everything works great and rock solid. I am able to produce live HTML and CSS results right before my eyes, using textfields.

My question, is what do I need to add to the jQuery code below, to allow the input from a separate textarea with an ID of head-links, to be sent into the the iFrames HEAD? I want the textarea with the ID of head-links, to send the user input into the HEAD of the iframe This will allow the users of this tool to link to their own external stylesheets and/or jquery/javascript libraries, etc.

Thank you all for the help. I have my jQuery script. Please tell me what you think.

ANSWER: It was easier to add the jQuery LINKS and SCRIPT tags from the parent documents head, into the iFrames head using jQuerys .clone method. Below is the working code.

$(document).ready(function() 
{ 
    // .Grid Window Height
    $('.grid').height( $(window).height() );
    // Declaring the Output Window Variables
    var frame = $('iframe'); // The iFrame variable itself
    contents = frame.contents(); // Declares the variable of contents which is the iFrames content
    body = contents.find('body'); //body variable finds the <BODY></BODY> tags in the iFrame
    contents.find('head') // .find the HEAD...
        .append('<style type=text/css></style>') // then, add a <STYLE></STYLE> tag to it...
    styleTag = contents.find("style");  

    // Append Parent Document HEAD Elements with the class of wst to the iFrames HEAD          
    var jq = $(".wst").clone();
    frame.contents()
        .find("head")
        .append(jq);

    // Detect textarea KeyUp during focus
    $('textarea').on("focus", function(e) 
    {
        var $this = $(e.target);

        $(document).keyup(function() 
        {
            // If the ID of HTML is found, inster the HTML into the iFrame's <BODY></BODY> tags
            if ( $this.attr('id') === 'html') 
            {
                body.html( $this.val() ); // Insert current value into the iFrames <BODY></BODY> tags
            }; 

            if ( $this.attr('id') === 'css') 
            {
                // Else the ID of HTML is not found...

                styleTag.text( $this.val() ); // Insert CSS into styleTag variable
            };
        });
    });
});

guest271314 · Accepted Answer · 2014-03-30 23:41:40Z

1

Try this

   $(document).ready(function () { //DOC Ready, start of script
      // .Grid Window Height
      $('.grid').height($(window).height());
      // Declaring the Output Window Variables
      var frame = $('iframe'), // The iFrame variable itself
          contents = frame.contents(), // Declares the variable of contents which is the iFrames content
          body = contents.find('body'), //body variable finds the <BODY></BODY> tags in the iFrame
          styleTag = contents // styleTag variable says to...
      .find('head') // ...find the HEAD of the iframe...
      .append('<style></style>'); // ...then, add a <STYLE></STYLE> tag to it.

      var scripts = "<script id=jquerycore type=text/javascript src=http://code.jquery.com/jquery-1.11.0.min.js></script>"+"<br />"+
                    +"<script id=jqueryuicss type=text/javascript src=http://code.jquery.com/ui/1.10.4/jquery-ui.min.js></script>"+"<br />"+
                    +"<script id=fontawesome type=text/javascript src=//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css></script>"+"<br />";
            contents.find("head").append(scripts);


      // Detect textarea KeyUp during focus

  $('textarea').focus(function () {
    var $this = $(this);

    $this.keyup(function () {
      // If a user inputs data into the textarea with an ID of HTML, insert that input into the iFrame's <BODY></BODY> tags
      if ($this.attr('id') === 'html') {
        body.html($this.val()); // Inster current value into the iFrames <BODY></BODY> tags
      };
      if ($this.attr('id') === 'css') {
        // Else the ID of HTML is not found...
        styleTag.text($this.val()); // ...Insert user input into the iFrames HEAD >> SCRIPT tags, via the styleTag variable
      };

      });
    });
  });

edited Mar 30, 2014 at 23:41

answered Mar 30, 2014 at 5:58

guest271314

1

Sign up to request clarification or add additional context in comments.

17 Comments

user3267537 Over a year ago

Will this add the correspnding code from the textarea into the HEAD, or into the HEAD's LINK tag? Because I tried it and it did not work for me. I updated my post with the new code that I tried using your advice, is it right?

guest271314 Over a year ago

@user3267537 The piece is untested. Tried regex on link id for more than single prospective link. Maybe try with single id for insert at head and if statement. Also, updating n may require additional logic. Can create a jsfiddle, post html ? If interpret correctly, requirement to insert link src attribute, url ? Try test with input mapped to link src ? Again, untested. Utilized pattern already present in posted piece, as style element inserted, keyup event at similar fashion there. Thanks for sharing. Happy to help if able. Hope this helps

user3267537 Over a year ago

I appreciate your suggestion, but I would much prefer to work with my existing JS as per my requirements, not someone else'. Thank you though. . Also, I thought about it for a bit. What I aim to do, is have predefined LINK and SCRIPT tags inside of the iFrames HEAD. What would I have to add to my existing JS to append the links to the latest jQuery UI, jQuery UI CSS, jQuery Library, and Font Awesome CSS. This way, when the iframe is loaded in the browser, it applies those LINK and SCRIPT tags allowing the user to have the libraries loaded for them. Thanks in advance for everything =)

guest271314 Over a year ago

@user3267537 Please see updated post. Checked for jQuery UI CSS, did not find, is it same as api.jqueryui.com/theming/css-framework ? Included in jquery ui ?

user3267537 Over a year ago

It did not seem to add the SCRIPT and LINK tags inot the iFrames HEAD. I am going to play around with the JS you've written and try to see what I can come up with. Any other ideas? You are awesome btw! =D =D Any suggestions please send them my way. To be able to provide LIVE jQuery and jQueryUI support in an iFrame would be awesome! Thanks again guest271314 you are the best..! =)

|

Collectives™ on Stack Overflow

Using textareas to display live results in iframe, using jQuery, add separate textarea input into iframes head

1 Answer 1

17 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

17 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related