使用textareas在iframe中顯示實時結果，使用jQuery，將單獨的textarea輸入添加到iframe頭部

Question

我創建了兩個文本區域。 一種用於HTML，另一種用於CSS輸入。 每個都有自己的ID。 使用我在網上找到的教程，我能夠使這些文本區域接受用戶輸入並實時顯示在iFrame中。

然后，我能夠編寫一些jQuery，它將用戶從文本區域輸入的ID為HTML的HTML內容添加到iFrames BODY標簽中，從而在iFrame中將HTML仿真為實時預覽。 此外，jQuery使用布爾值來檢測文本區域中是否存在用戶輸入而沒有html的ID（在本例中為ID為css的文本區域），然后將輸入插入到STYLE標記內的iFrame的HEAD中，因此可將CSS添加到iframe的頭部。 在其自己的樣式標簽中，並允許用戶在iFrame中生成其CSS和HTML的實時輸出。 一切正常，堅如磐石。 我可以使用文本框立即生成實時HTML和CSS結果。

我的問題是，我需要添加什么到下面的jQuery代碼中，以允許來自ID為head-links的單獨textarea的輸入發送到iFrame HEAD中？ 我希望帶有head-links ID的textarea將用戶輸入發送到iframe的HEAD。這將允許該工具的用戶鏈接到自己的外部樣式表和/或jquery / javascript庫等。

謝謝大家的幫助。 我有我的jQuery腳本。 請告訴我你的想法。

解答：使用jQuerys .clone方法將父文檔頭中的jQuery LINKS和SCRIPT標簽添加到iFrames頭中比較容易。 以下是工作代碼。

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

Answer 1

嘗試這個

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

      });
    });
  });

使用textareas在iframe中顯示實時結果，使用jQuery，將單獨的textarea輸入添加到iframe頭部

問題描述

1 個解決方案

解決方案1
1 已采納 2014-03-30 05:58:47

使用textareas在iframe中顯示實時結果，使用jQuery，將單獨的textarea輸入添加到iframe頭部

問題描述

1 個解決方案

解決方案1 1 已采納 2014-03-30 05:58:47

解決方案1
1 已采納 2014-03-30 05:58:47