2017-03-06 13 views
3

私は以下のようにエンコードされたhtmlコンテンツを持つ要素を持っています。jQueryの実際のHTMLコンテンツを表示

<div class="hasTooltip"> 
    &lt;html&gt;........... //more html encoded text 
</div> 

この要素をクリックすると、コンテンツが新しいウィンドウに表示され、うまく動作します。

$('.hasTooltip').click(function() { 
    var win = window.open("", "Title", "toolbar=no"); 
    win.document.body.innerHTML = $(this).html(); 
}); 

しかし、問題は、ウィンドウが復号化された値を使用して、HTMLテキストではなく、すべてのスタイルと実際のHTMLコンテンツを示すことです。

以下のコードを試しましたが、コンテンツが表示されないので運がありません。任意のヒント?ここで

win.document.body.innerHTML = $(this).html().text(); 
+0

のjQueryを使用してHTMLエンティティをデコードする方法http://stackoverflow.com/questions/1147359/how-to-decode-html-entities-using-jqueryをチェック! – GavinBrelstaff

+0

@GavinBrelstaff私はリンクを見ました。受け入れられた答えは、その答えにコメントされているようなセキュリティの面では良くありません。 – Purus

答えて

2

をjsfiddle確認してくださいすべき作業。

function unEscape(str){ 
 
    str = str.replace(/&quot;/g,'"').replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>') 
 
return str; 
 
} 
 
var h = document.getElementById("hasTooltip").innerHTML; 
 

 
console.log(unEscape(h))
<div id="hasTooltip"> 
 
    &lt;html&gt;&lt;/html&gt; 
 
</div>

0

あなたがここの上にあなたのコードを実行することができない場合は、あなたのソリューションは

あるコードに続いて

https://jsfiddle.net/sq3Ljwnt/

$('.hasTooltip').click(function() { 
 
    var win = window.open("", "Title", "toolbar=no"); 
 
    win.document.body.innerHTML = $("textarea").val(); 
 
});
textarea{ 
 
    height:200px; 
 
    width:100%; 
 
    border:none !important; 
 
    background:none; 
 
    resize: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="hasTooltip"> 
 
<textarea> 
 
<html> 
 
    <h1> 
 
    This is test 
 
    </h1> 
 
    <p> 
 
    More HTML ... 
 
    </p> 
 
</html> 
 
</textarea> 
 
</div>

+0

あなたの例の実際の値はエンコードされていません。 – Purus

+0

エンコードされたhtmlで更新され、textareaが削除されました:https://jsfiddle.net/sq3Ljwnt/1/ –

関連する問題