用Javascript嵌入包含<script>的MvcHtmlString

Question

下面的方法使用Javascript (使用一些JQuery)将string中的一些Html嵌入到<div>中：

var div = $('#someId');
var testHtml = '<script></script><div>dummy Content</div>';
div.html(testHtml);

Html代码被嵌入并显示在div中。如果我在<script>标记中添加一些alert('Test')-statement，警报就会出现。

同样有效的是：

<div id="someId">@MvcHtmlString.Create("<script></script><div>dummy Content</div>")</div>

但是，我需要将MvcHtmlString传递给javascript函数，然后将此字符串与javascript一起嵌入。

如果字符串中没有javascript代码，则可以执行此操作：

var div = $('#someId');
var inputItem = '@MvcHtmlString.Create("<div>dummy Content</div>")';
div.html(inputItem);

但是，如果字符串中包含javascript内容，则不会嵌入<script>-part，并且无法正确显示内容。

所以这不能正常工作：

var div = $('#someId');
var inputItem = '@MvcHtmlString.Create("<script></script><div>dummy Content</div>")';
div.html(inputItem);

有人能解释一下为什么这个不起作用吗？有什么简单的窍门吗？

Answer 1

我不知道您在哪个浏览器上测试过(我在IE8和Chrome22中测试过)，但您最初的示例也不起作用：

var div = $('#someId');
var testHtml = '<script></script><div>dummy Content</div>';
div.html(testHtml);

检查此JSFiddle

因为您不能在JS字符串中包含"</script>"，因为浏览器将其解释为结束<script>标记。请看这个SO问题：Script tag in JavaScript string

所以解决方案对你来说是一样的，所以不要在字符串中直接使用</script>：

<script type="text/javascript">
    var div = $('#someId');
    var testHtml = '@MvcHtmlString.Create("<script>alert(\"test\");</sc' + 'ript><div>dummy Content</div>")';
    div.html(testHtml);
</script>

您还可以在此JSFiddle中检查这一点。

Answer 2

向脚本标记添加假属性类型，而不是“text/javascript”转义内容。例如：

var inputItem = '@MvcHtmlString.Create("<script type="text"></script><div>dummy Content</div>")';

稍后删除此属性可以实现此目的。但由于我不知道MvcHtmlString是如何工作的，我真的不确定它是不是一个解决方案。

Answer 3

MvcHtmlString.Create方法创建经过编码的超文本标记语言并剥离超文本标记语言脚本标记。

使用@Html.Raw("htmlstring")为您提供字符串的原始HTML值，而不剥离标记。

var div = $('#someId');
var inputItem = '@Html.Raw("<script></script><div>dummy Content</div>")';
div.html(inputItem);