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

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
            };
        });
    });
});

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

      });
    });
  });

来源：https://stackoverflow.com/questions/22740665/using-textareas-to-display-live-results-in-iframe-using-jquery-add-separate-te

标签

javascript

jquery

html

iframe

textarea