2009-10-14 14 views
17

में मैं एक ब्राउज़र में HTML संपादक बनाने रहा हूँ। मैं कोड मिरर नामक सिंटैक्स हाइलाइटर का उपयोग कर रहा हूं जो बहुत अच्छा है।HTML प्रविष्टि आइफ्रेम

मेरे सेटअप एक iframe कि पृष्ठ संपादित किया जा रहा है और एक पाठ क्षेत्र जो सामान्य पाठ HTML बैठता है जो उपयोगकर्ता संपादन के एक दृश्य रखती है।

मैं iframe जो प्रदर्शित करता है वे एचटीएमएल गाया में पाठ क्षेत्र से संपादित एचटीएमएल सम्मिलित करने के लिए कोशिश कर रहा हूँ।

क्या यह संभव है?

एचटीएमएल सेटअप:

<iframe id="render"> 

</iframe> 

<textarea id="code"> 
HTML WILL BE 

HERE 
</textarea> 
<input type="submit" id="edit_button" value="Edit" /> 

JQuery सेटअप:

$('#edit_button').click(function(){ 
    var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area 
    var iframe = $('#render'); 
    iframe.html(code) 
}) 

इस iframe में HTML लोड करने के लिए प्रतीत नहीं होता है, वहाँ डालने के लिए एक विशेष तरीका है एचटीएमएल मैं निम्नलिखित की कोशिश की है एक आईफ्रेम में या यह संभव नहीं है?

चीयर्स

EEF

+1

संभावित डुप्लिकेट [आईफ़्रेम के अंदर HTML डालने (जावास्क्रिप्ट का उपयोग करके)] (http://stackoverflow.com/questions/620881/putting-html-inside-an-iframe-using-javascript) –

उत्तर

-1

document.designMode

प्रॉपर्टी सेट और उसके बाद यह समस्या मुझे भी और वित्तीय और प्रक्रियात्मक पहलुओं bugged HMTL

पढ़ें

Rich-Text Editing in Mozilla

भी

+0

'दस्तावेज़ के समान। contenteditable = "सच" '? – JCOC611

2

कोशिश

iframe[0].documentElement.innerHTML = code; 

यह मानते हुए कि iframe पर यूआरएल वेबपेज के रूप में एक ही डोमेन से है।

27

जोड़ने का प्रयास करें लिली समाधान मिला।

इसके देर से, लेकिन अन्य आगंतुकों को जो उचित ठीक आवश्यकता हो सकती है के लिए मूल्य जोड़ देगा।

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html lang="en"> 
<head> 
    <title>Iframe test</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"> 
    </script> 
    <script type="text/javascript"> 
     $(function() { 
      var $frame = $('<iframe style="width:200px; height:100px;">'); 
      $('body').html($frame); 
      setTimeout(function() { 
       var doc = $frame[0].contentWindow.document; 
       var $body = $('body',doc); 
       $body.html('<h1>Test</h1>'); 
      }, 1); 
     }); 
    </script> 
</head> 
<body> 
</body> 
</html> 
+0

आप जावास्क्रिप्ट में iframe क्यों बनायेंगे? कि यह करने के लिए इस तरह के एक भयानक तरीका की तरह लगता है ... – Jesus

10

आप jQuery के साथ एक लाइन पर यह सब कर सकते हैं

$("iframe").contents().find('html').html("Your new HTML"); 

यहाँ http://jsfiddle.net/dWpvf/972/

काम कर डेमो देखें आपके उदाहरण के लिए "#render" के साथ "आइफ्रेम" बदलें। मैंने "iframe" में छोड़ा ताकि अन्य उपयोगकर्ता उत्तर का संदर्भ दे सकें।

+0

सुनिश्चित नहीं हैं कि क्यों स्वीकार किए जाते हैं जवाब downvoted गया है, लेकिन इस सवाल का भविष्य दर्शकों के लिए, इस विधि शानदार है और काम करता है :) – mickburkejnr

संबंधित मुद्दे