1

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
            };
        });
    });
});
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
user3267537
  • 131
  • 2
  • 10

1 Answers1

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

      });
    });
  });
guest271314
  • 1
  • 15
  • 104
  • 177
  • 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? – user3267537 Mar 30 '14 at 06:11
  • @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 – guest271314 Mar 30 '14 at 06:38
  • 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 =) – user3267537 Mar 30 '14 at 23:15
  • @user3267537 Please see updated post. Checked for `jQuery UI CSS`, did not find, is it same as http://api.jqueryui.com/theming/css-framework/ ? Included in `jquery ui` ? – guest271314 Mar 30 '14 at 23:48
  • 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..! =) – user3267537 Apr 02 '14 at 04:54
  • @user3267537 Does include of existing piece at original post remain requirement ? Thank you ! Happy to help if able – guest271314 Apr 02 '14 at 06:43
  • When I tried your revised code, it actually stopped the entire SCRIPT from working and idk why because your code looked good. I will post a jsFiddle here to let you see my exact requirements. The URL in question is http://webgen.ajadmin.com if you'd like to see it live. – user3267537 Apr 03 '14 at 19:47
  • @user3267537 Does the requirement include utilizing the base piece from post no. 1, or any piece ? The `subdoc()` piece from another page, appears to work. Try that piece including `script` ? Please clarify. Thanks – guest271314 Apr 04 '14 at 00:42
  • Yes it does. It includes utilizing the base piece of code for it. Also, maybe you can elaborate the subdoc()? I will Google it also. I also updated my Original Post to the first JS I asked about. The working JS taht accpets HTML and CSS. I would love to predefine at the very least the jQuery SCRIPT Tag to the iFrames HEAD.Thanks again bud =) – user3267537 Apr 04 '14 at 06:06
  • @user3267537 Composed a similar piece at another question. Works. Should be possible to add `js` prior to `iframe` generation. may have posted it here , yet requirement was to _only_ utilize the base piece at post 1 ? Should be able to try the piece at the page, at `console`. fwiw http://stackoverflow.com/questions/21739382/how-to-create-a-cross-browser-sub-document-with-iframe-or-shadow-dom/21935605#21935605 – guest271314 Apr 04 '14 at 06:18
  • - What I am curious of, is why is your code not working. Your variables look correct, everything should be working but it is not. I looked over the code and it should add the JS and JQUI SCRIPT and LINK tags to the iFrames HEAD but it doesnt. I am confused. Also, the link you posted to the other post does not contian the same requirements as mine. I need to append the SCRIPT and LINK tags that lead to jQuery and jQuery UI to the iFrames HEAD. This way when a user inputs jQuery it shows a live output in the existing iframe. Here's JSFiddle link using my curent code: http://jsfiddle.net/FP47D/8/ – user3267537 Apr 04 '14 at 21:16
  • @user3267537 For clarity, if meet requirements by other means, _can_ answer be "accepted" ? You are correct, the link to other post does not currently possess `link` and `script` `tags`, yet if configure a way to include them, and piece works - without using piece from post 1 - _can_ piece be accepted, or at least considered for accepting ? Thanks – guest271314 Apr 04 '14 at 21:54
  • Marked as answer and Plus 1'ed it too. Thank you guest271314. Any other help you can offer me would be awesome. Did you see my JSFiddle? Maybe you can try messing with the JS there and see what you can get..? Thanks again and thanks in advance! =) – user3267537 Apr 05 '14 at 00:49
  • @user3267537 A potential way to load `jquery`, or other libraries into `iframe`. http://jsfiddle.net/guest271314/h3Zg5/ . The relevant portions are commented at both the `HTML` and `JavaScript` jsfiddle `windows`. Also, please note that the `css` portion does not appear to work properly. The `css` from `textarea` does `append` to `iframe`, yet doe not currently get displayed - unless `style` `attribute` with properties are used on `element` at `html` textarea`. No solution for that portion, yet. Try append `script`s from `parent` `document` to `iframe` using unique `id`s for each `script` lib. – guest271314 Apr 05 '14 at 16:00
  • The CSS textfields input is simply appended to a STYLE tag in the iFrames HEAD and inserts the users input as CSS in that STYLE tag. I will mess around with it more and tell you my findings thank you so much guest271314. I would have never thought of appending parent document scripts. How would I write that in JS? – user3267537 Apr 05 '14 at 20:28
  • See jsfiddle in comment above, within `HTML` and `JavaScript` windows see comments noted as `[1]`, utilizes jquery's `.clone()` method to copy the element from `parent` document to `iframe` document. – guest271314 Apr 05 '14 at 21:30
  • guest271314, you are a genuis! It worked. I am in debt to you for this and thank you so much for all your help =) But, using a CS class allows me to implement jQuery UI SCRIPTS and LINKS just as long as I use a class of headElements (which is my new #jquery from you). This also allows me to link to font awesome etc. Thank you soooo much!!!!! – user3267537 Apr 06 '14 at 04:02