如何将包含HTML的字符串传递给onClick事件

How to pass a string which contains HTML to an onClick event?

本文关键字：onClick 事件 字符串 包含 HTML      更新时间：2023-09-26

我正在c#代码中创建一个元素，其中包含一个将字符串参数复制到剪贴板的onclick事件。

它工作得很好，问题是当我必须传递一个参数时，该参数是一个HTML代码，带有
和标记。它会打断我的页面，因为可能会出现引号('((如样式和colspan标记(。

我使用的代码是：

string comment = row.Cells[1].Text;
Cells[0].Text += "<br/><a href='javascript:' onclick='javascript:CopyComment(" + comment + ")'>COPY</a>";

如何传递一个以HTML为参数的字符串而不破坏页面？

编辑1:

这是我作为参数传递的HTML代码：

> "<span style='color:#FF0000;'><b>COTAÇÃO</b></span><br />'r'n<br
> />'r'n<br />'r'nAssunto: Cotação / Assistência: 425595 / Placa:
> EAL8426<br />'r'n<br />'r'nSegue conforme solicitado:<br />'r'n<br
> />'r'n<span
> style='text-decoration:underline;'><b>ORIGEM:</b></span><br />'r'nRua
> Glauber Rocha, 39 - Jardim Alzira, São Paulo - SP, 03986-270, Brasil,
> 39<br />'r'n<br />'r'n<span
> style='text-decoration:underline;'><b>DESTINO:</b></span><br />'r'nR.
> Conselheiro Saraiva, 36 - Santana, São Paulo - SP, Brasil, 36<br
> />'r'n<br />'r'n<br />'r'n<b>Cotação 1</b><br />'r'nTempo de Chegada:
> 50<br />'r'n<br
> />'r'n<table>'r'n<tr>'r'n<td>Tarifa</td><td>Valor</td><td>Quantidade</td><td>Total</td>'r'n</tr>'r'n<tr>'r'n<td>Saída</td><td>R$
> 99,00</td><td>1</td><td>R$ 99,00</td>'r'n</tr>'r'n<tr>'r'n<td>KM
> (Excedente)</td><td>R$ 1,50</td><td>10</td><td>R$
> 15,00</td>'r'n</tr>'r'n<tr>'r'n<td>Pedágio</td><td>R$
> 20,00</td><td>1</td><td>R$ 20,00</td>'r'n</tr>'r'n<tr>'r'n<td>Horas
> Trabalhadas</td><td>R$ 46,00</td><td>2</td><td>R$
> 92,00</td>'r'n</tr>'r'n<tr>'r'n<td>KM (Deslocamento)</td><td>R$
> 1,50</td><td>10</td><td>R$
> 15,00</td>'r'n</tr>'r'n<tr>'r'n<td>Destombamento</td><td>R$
> 125,00</td><td>1</td><td>R$ 125,00</td>'r'n</tr>'r'n<tr>'r'n<td
> colspan='2'>&nbsp;</td><td>Total</td><td>366,00</td>'r'n</tr>'r'n</table>'r'n<br
> />'r'n'r'n<br />'r'nNo aguardo<br />'r'n<br />'r'nAtenciosamente'r'n"

这是我的javascript函数，它将文本(使用HTML格式(复制到剪贴板

function CopiarComentario(html) {
    var tmpEl;
    tmpEl = document.createElement("div");
    // since we remove the element immediately we'd actually not have to style it - but IE 11 prompts us to confirm the clipboard interaction and until you click the confirm button, the element would show. so: still extra stuff for IE, as usual.
    tmpEl.style.opacity = 0;
    tmpEl.style.position = "absolute";
    tmpEl.style.pointerEvents = "none";
    tmpEl.style.zIndex = -1;
    // fill it with your HTML
    tmpEl.innerHTML = decodeHtml(html);
    // append the temporary node to the DOM
    document.body.appendChild(tmpEl);
    // select the newly added node
    var range = document.createRange();
    range.selectNode(tmpEl);
    window.getSelection().addRange(range);
    // copy
    document.execCommand("copy");
    // and remove the element immediately
    document.body.removeChild(tmpEl);
}
function decodeHtml(html) {
    var txt = document.createElement("textarea");
    txt.innerHTML = html;
    return txt.value;
}

Cells[0].Text += "<br/><a href='javascript:' onclick='javascript:CopyComment(" + HttpUtility.HtmlEncode(comment) + ")'>COPY</a>";

阅读有关HttpUtility的更多信息。HtmlEncode在此处。

相关文章：