एचटीएमएल इनपुट पूरे पृष्ठ को प्रभावित करता है

मैं एक पृष्ठ बना रहा हूं जहां आप HTML दर्ज कर सकते हैं और आउटपुट को तरफ से एक div में देख सकते हैं।
कोड:एचटीएमएल इनपुट पूरे पृष्ठ को प्रभावित करता है

$("#tryit").keyup(function() { 
 
    var input = $(this).val(); 
 
    $("#readout").html(input); 
 
});

#readout { 
 
    height: 400px; 
 
    width: 48%; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    float: right; 
 
    clear: none; 
 
    display: inline-block; 
 
} 
 
#tryit { 
 
    height: 396px; 
 
    width: 50%; 
 
    float: left; 
 
    clear: none; 
 
    display: inline-block; 
 
    font-family: monospace; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt; 
 
</textarea> 
 

 
<div id="readout"></div>

यह काम करता है के रूप में यह कार्य करना चाहिए: यह #readout करने के लिए HTML आउटपुट। क्या गलत होता है जब कोई उपयोगकर्ता head में <style> टैग जोड़ता है। फिर वहां जोड़ा गया शैली न केवल टेक्स्ट इनपुट में HTML को प्रभावित करता है, बल्कि पूरे पृष्ठ में।
मैं सीएसएस को केवल उपयोगकर्ता के इनपुट को प्रभावित कैसे कर सकता हूं, न कि संपूर्ण पृष्ठ?
यहां Problem Page है।

स्रोत

2015-07-16 TricksfortheWeb

वह '' में कुछ कैसे जोड़ता है? आपकी लिपि सब कुछ 'रीडआउट' डीआईवी में रखती है। – Barmar

पेज को देखें। सिर में स्टाइल टैग जोड़ने और शरीर के पैडिंग के साथ गड़बड़ करने का प्रयास करें। यह वास्तविक पृष्ठ के पैडिंग को प्रभावित करेगा, न कि रीडआउट। – TricksfortheWeb

असली समाधान ऐसा करना है जैसे jsfiddle और codepen do: उपयोगकर्ता के कोड को iframe में डालें ताकि यह मुख्य पृष्ठ को प्रभावित न करे। – Barmar

आप वास्तव में इस लक्ष्य को हासिल करने के लिए एक अलग दृष्टिकोण का उपयोग कर विचार करना चाहिए कहते हैं।

यदि आप वास्तव में जो कुछ भी प्राप्त कर रहे हैं उसके साथ जाना चाहते हैं तो आपको टेक्स्टरेरा मूल्य के भीतर बहुत सारी चीज़ें बदलनी होंगी। बस आपको एक विचार पेज के body को #readoutdiv और नहीं करने के लिए शैलियाँ लागू करने देने के लिए, नीचे दिए गए स्निपेट मैं केवल id ( #readout) के साथ html और body शैली घोषणाओं की जगह कर रहा हूँ में। यह body के लिए काम करता है, लेकिन अन्य सभी संभावित घोषणाओं के साथ क्या है?

निश्चित रूप से जब मैं regex की बात करता हूं तो मैं असली नोब हूं और मुझे यकीन है कि यह बहुत बेहतर किया जा सकता है, लेकिन यह सब आवश्यक नहीं है।

$("#tryit").keyup(function() { 
 
    var style = $(this).val().match(/<style>(.*)<\/style>/); 
 
    if (style !== null && style.length > 0) { 
 
     var bodyReplace = style[1].replace(/(^|\s)(html)|(body)(\s|$)/ig, '#readout'); 
 
    } 
 
    var input = $(this).val(); 
 
    $("#readout").html(input.replace(/<style>.*<\/style>/, '<style>'+bodyReplace+'</style>')); 
 
}); 
 

 
$("#tryit").keyup();

#readout { 
 
    height: 400px; 
 
    width: 48%; 
 
    border: 1px solid black; 
 
    overflow: auto; 
 
    float: right; 
 
    clear: none; 
 
    display: inline-block; 
 
} 
 
#tryit { 
 
    height: 396px; 
 
    width: 50%; 
 
    float: left; 
 
    clear: none; 
 
    display: inline-block; 
 
    font-family: monospace; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt;<style>body {background: black; color: red }</style> &lt;/head&gt; &lt;body&gt;<h1>Hello</h1> &lt;/body&gt; &lt;/html&gt; 
 
</textarea> 
 
<div id="readout"></div>

एक अन्य समस्या यह है कि आपके textarea में <doctype>, <html>, <head> और <body> तत्वों वास्तव में नहीं मौजूद है। स्रोत पर एक नज़र डालें और आप पाएंगे कि वे वहां नहीं हैं और वे वहां नहीं हैं। ऐसा कहा जा रहा है कि मैं बार्मर द्वारा टिप्पणी में उल्लिखित समाधान के साथ जाऊंगा, जिन्होंने iframe का उपयोग करने का सुझाव दिया था।

वास्तव में यह हासिल करना मुश्किल नहीं है। एक त्वरित और गंदा तरीका blob को टेक्स्टरेरा value से क्रेट करना है और iframe के स्रोत विशेषता में जोड़ें। इससे सीएसएस के लिए एक और टेक्स्टरेरा करके value को iframe के सिर में स्टाइल शीट के रूप में इंजेक्शन करने से आपके एचटीएमएल और सीएसएस को अलग करना आसान हो जाएगा।के बाद से मैं बहुत टुकड़ा उपकरण में iframe बात का उपयोग नहीं कर सकते क्योंकि सैंडबॉक्स सुरक्षा सामान के इस

JSFIDDLE

की जाँच करें और मुझे यकीन है कि आप अंदाजा हो जाएगा।

स्रोत

2015-07-17 14:13:22 DavidDomain

धन्यवाद। मैं सोच रहा था कि कैसे - अगर बिलकुल नहीं - यह संभव था। – TricksfortheWeb

अपने सीएसएस में जहां यह एक विशिष्ट आईडी के साथ अपने div इनपुट का चयन करता है करने के लिए इसे बनाने के तो अपने बच्चे तत्वों का चयन करें:

<style>  
#readout input{ 
    color: red; 
} 
</style>

मैं शैली टैग जोड़ा जब से तुम सीएसएस सीधे लगा रहे हैं आपके html संपादक में। उपर्युक्त सीएसएस केवल आपके div में प्रत्येक इनपुट तत्व को रीडआउट की आईडी के साथ प्रभावित करेगा।

आप कुछ अलग के लिए देख रहे हैं तो कृपया

Look at this fiddle

स्रोत

2015-07-16 22:49:49 code

नहीं, यह वही नहीं है जो मैं चाहता हूं। समस्या के साथ पेज को देखो। यदि आप टेक्स्टरेरा में शैली जोड़ते हैं, तो यह वास्तविक पृष्ठ को प्रभावित करेगा, न कि रीडआउट div – TricksfortheWeb

किसी भी शैली जिसे आपने उस संपादक में डाला है उसे ** शैली ** टैग में लपेटा जाना चाहिए ताकि यह पता चल सके कि इसका सीएसएस और टेक्स्ट – code

नहीं है , लेकिन स्टाइल टैग में लिपटे स्टाइल पूरे पृष्ठ को प्रभावित करती है, न कि रीडआउट – TricksfortheWeb

एचटीएमएल इनपुट पूरे पृष्ठ को प्रभावित करता है

उत्तर

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