Nhập HTML ảnh hưởng đến toàn bộ trang

Tôi đang tạo một trang nơi bạn có thể nhập HTML và xem kết quả đầu ra trong một div sang một bên.
Code:Nhập HTML ảnh hưởng đến toàn bộ trang

$("#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>

Nó hoạt động như bình thường: nó kết quả đầu ra HTML cho #readout. Điều gì xảy ra là khi người dùng thêm thẻ <style> vào số head. Sau đó, kiểu được thêm vào sẽ không chỉ ảnh hưởng đến HTML trong kiểu nhập văn bản mà còn ảnh hưởng đến toàn bộ trang.
Tôi làm cách nào để CSS chỉ ảnh hưởng đến dữ liệu nhập của người dùng chứ không phải toàn bộ trang?
Đây là Problem Page.

Nguồn

2015-07-16 TricksfortheWeb

Làm cách nào để thêm nội dung nào đó vào ' '? Kịch bản của bạn đặt mọi thứ trong 'readout' DIV. – Barmar

Nhìn vào trang. Hãy thử thêm một thẻ kiểu trong đầu và gây rối với phần đệm của cơ thể. Nó sẽ ảnh hưởng đến padding của trang thực tế, không ảnh hưởng đến readout. – TricksfortheWeb

Giải pháp thực sự là làm như jsfiddle và codepen làm: đặt mã của người dùng vào iframe để nó không ảnh hưởng đến trang chính. – Barmar

Bạn thực sự nên xem xét sử dụng một cách tiếp cận khác nhau để đạt được điều này.

Nếu bạn thực sự muốn đi với những gì bạn có cho đến nay bạn sẽ phải thay thế rất nhiều thứ trong giá trị văn bản. Chỉ cần cung cấp cho bạn một ý tưởng, trong đoạn mã dưới đây tôi đang chỉ thay thế tờ khai html và body phong cách với id (#readout) để áp dụng các phong cách cho #readoutdiv chứ không phải body trang. Nó hoạt động cho body, nhưng với tất cả các khai báo khác có thể là gì?

Chắc chắn tôi là một noob thực khi nói đến regex và tôi chắc chắn điều này có thể được thực hiện tốt hơn rất nhiều, nhưng tất cả điều này là không cần thiết.

$("#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>

Một vấn đề khác là các <doctype>, <html>, <head> và <body> yếu tố trong textarea của bạn không thực sự tồn tại. Hãy nhìn vào nguồn và bạn sẽ thấy rằng họ không có ở đó và họ không thuộc về đó. Điều đó đang được nói rằng tôi sẽ đi với một giải pháp được đề cập trong một bình luận của Barmar, người đã đề xuất sử dụng một iframe.

Nó thực sự không khó để đạt được. Một cách nhanh chóng và bẩn thỉu là viết một blob từ văn bản value và thêm nó vào thuộc tính nguồn của iframe. Điều đó sẽ giúp bạn dễ dàng tách HTML và CSS của mình bằng cách có một vùng văn bản khác cho CSS và tiêm nó là value dưới dạng tờ mẫu vào đầu của iframe.Kể từ khi tôi không thể sử dụng điều iframe trong công cụ SO đoạn vì công cụ bảo mật sandbox kiểm tra này

JSFIDDLE

và tôi chắc chắn bạn sẽ có được ý tưởng.

Nguồn

2015-07-17 14:13:22 DavidDomain

Cảm ơn. Tôi đã tự hỏi làm thế nào - nếu ở tất cả - điều này là có thể. – TricksfortheWeb

Trong css của bạn làm cho nó đến nơi mà nó lựa chọn div đầu vào của bạn với một id cụ thể sau đó chọn phần tử con của nó:

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

tôi thêm thẻ phong cách kể từ khi bạn đang đặt các css trực tiếp trong trình soạn thảo html của bạn. Css trên sẽ chỉ ảnh hưởng đến mọi yếu tố đầu vào trong div của bạn với id của readout.

Nếu bạn đang tìm kiếm một cái gì đó khác nhau hãy nói như vậy

Look at this fiddle

Nguồn

2015-07-16 22:49:49 code

Không, đây không phải là điều tôi muốn. Nhìn vào trang có vấn đề. Nếu bạn thêm kiểu trong vùng văn bản, nó sẽ ảnh hưởng đến trang thực, không phải div đọc – TricksfortheWeb

Bất kỳ kiểu nào mà bạn gõ trong trình chỉnh sửa đó sẽ được gói trong thẻ ** kiểu ** để nó biết rằng css của nó chứ không phải văn bản – code

có , nhưng phong cách được bao bọc trong một thẻ kiểu ảnh hưởng đến toàn bộ trang, không phải là div với id của readout – TricksfortheWeb

Nhập HTML ảnh hưởng đến toàn bộ trang

Trả lời

Các vấn đề liên quan