ASP.NET实现点击按钮编译HTML并在新窗口预览的方案咨询

嘿，我来帮你调整现有脚本，实现点击Preview按钮在新窗口编译并展示HTML的功能！你的现有代码是把HTML渲染在当前页面的元素里，咱们稍微改改就能达成需求：

第一步：完善前端HTML结构 #

首先确保页面上有输入HTML的文本框和触发预览的按钮，你可以用纯HTML控件或者ASP.NET服务器控件：

纯HTML版本： #

<textarea class="textbox-preview" rows="12" cols="90" placeholder="请输入要预览的HTML代码..."></textarea>
<button class="link-preview" style="margin-top:10px;">Preview</button>

ASP.NET服务器控件版本（Web Forms）： #

如果你用的是Web Forms，服务器控件的ID会被ASP.NET自动生成，所以用CSS类来定位更稳妥：

<asp:TextBox runat="server" ID="txtHtmlInput" CssClass="textbox-preview" TextMode="MultiLine" Rows="12" Columns="90"></asp:TextBox>
<asp:Button runat="server" ID="btnPreview" CssClass="link-preview" Text="Preview" OnClientClick="generatePreview(); return false;" />

注意：服务器按钮要加return false;防止页面回发打断预览逻辑。

第二步：修改JavaScript逻辑 #

把你的现有脚本改成打开新窗口并写入HTML内容的版本：

$(document).ready(function () {
    $(".link-preview").click(generatePreview);
});

// 保留原函数（可选）：如果需要同时在当前页面预览可以用它
function generatePreview2($value) {
    const previewElement = document.getElementById("generatedPreview");
    if (previewElement) {
        previewElement.innerHTML = $value;
    }
}

function generatePreview() {
    // 获取用户输入的HTML内容
    const rawHtml = $(".textbox-preview").val();
    
    // 🔴 重要：添加安全过滤（防止XSS攻击）
    // 这里是简单过滤，生产环境建议用专业库如DOMPurify
    const sanitizedHtml = rawHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
    
    // 打开一个新窗口，设置窗口大小
    const previewWindow = window.open('', '_blank', 'width=900,height=700,scrollbars=yes');
    
    // 写入过滤后的HTML到新窗口
    previewWindow.document.write(sanitizedHtml);
    previewWindow.document.close(); // 关闭文档流，确保浏览器渲染内容
    
    // 可选：同时在当前页面预览
    // generatePreview2(sanitizedHtml);
}

第三步：ASP.NET相关注意事项 #

1. jQuery引用：确保页面已经引入了jQuery，比如在<head>里添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

或者用ASP.NET的ScriptManager引用本地jQuery文件。

2. 避免页面回发：如果用的是ASP.NET服务器按钮，一定要在OnClientClick里加return false;，不然点击按钮会触发页面回发，打断预览逻辑。

3. 安全提示：用户输入的HTML可能包含恶意脚本（XSS攻击），所以一定要做内容过滤。上面的示例是简单移除script标签，生产环境推荐使用成熟的HTML净化库来处理更复杂的情况。

内容的提问来源于stack exchange，提问作者Sami