堆棧內存溢出
  簡體   English   中英

在使用onClick和innerHTML時，如何正確地逃避大塊HTML？

[英]How can I properly escape a large block of HTML when using onClick and innerHTML?

 原文  2018-01-23 10:22:44  4   5    javascript/ html/ escaping/ innerhtml/ quotes

問題描述

這是我的HTML： 

<div id="#my_link"></div>

<a href="#" onclick="document.getElementById('#my_link').innerHTML = ''"></a>

這是我要插入#my_link的代碼： 

 <div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>

它有單引號，雙引號和克拉的混合物。 每當我嘗試將其放入innerHTML時，我都會收到Uncaught SyntaxError: Unexpected identifier錯誤。 我試過以一堆不同的方式逃避它，但我總是得到那個錯誤。

我必須使用onClick，我不能使用單獨的腳本標記。

JSFiddle鏈接： https ：//jsfiddle.net/zwtr96se/

5 個解決方案

解決方案1
 2 已采納  2018-01-23 10:32:01

將'替換'替換為 

<div id="#my_link"></div>

<a href="#" onclick="document.getElementById('#my_link').innerHTML = '<div style=&quot;position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center&quot;><form action=&quot;http://example.com&quot; style=&quot;display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;&quot;><p style=&quot;font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;&quot;><b>Sign In</b></p><p style=&quot;font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;&quot;>It&quot;s been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style=&quot;display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;&quot; placeholder=&quot;Email&quot;></input><input type=&quot;password&quot; style=&quot;display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;&quot; placeholder=&quot;Password&quot;></input><button type=&quot;submit&quot; style=&quot;display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;&quot;>Sign in</button></form></div>'">Click me</a>

示例： https ： //jsfiddle.net/uLm6bwe2/

解決方案2
 1  2018-01-23 11:43:16

您可以使用以下方法。

將代碼分配給超鏈接元素的自定義屬性。 然后在單擊事件中，提取該自定義屬性的值並分配給innerHTML。 在這里，我附上一個JSFiddle鏈接來演示上述方法。

例： 

    <!DOCTYPE html>
<html>

  <head>
    <title></title>
  </head>

  <body>
    <div id="#my_link"></div>

    <a href="#" custom="<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' + style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>"
    onclick="document.getElementById('#my_link').innerHTML = this.getAttribute('custom');">Click Me</a>

  </body>

</html>

JSFiddle： https ：//jsfiddle.net/j2vckrkm/2/

解決方案3
 0  2018-01-23 10:28:18

試試： 

var htmlcode = "<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>";

<a href="#" onclick="document.getElementById('my_link').innerHTML = unescape(htmlcode)"></a>

解決方案4
 0  2018-01-23 10:29:53

你可以使用模板字符串; 

const content = ` <div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>`
const link = document.getElementById('#my_link');
link.addEventListener('click', (e) => {
  link.innerHTML = link.innerHTML.length > 0 ? '' : content;
})

解決方案5
 0  2018-01-23 10:32:55

請改用以下代碼 

<div id="my_link"></div>
<a href="#" onclick="fn()">Click</a>
<script>
    function fn()
    {
        document.getElementById("my_link").innerHTML = "<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>";
    }
</script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用javascript在按鈕上單擊時注入較大的html代碼？ 如何在使用Javascript的innerHTML時保留html 如何使用 .innerHTML 添加 html 標簽？ 如何將大型HTML代碼轉換成字符串以在.innerHTML中使用 如何在使用angularJS {{expression}}時顯示innerHTML？ 如何在JavaScript中正確地逃避JavaScript？ 如何使用 HTML 阻止圖像 如何在不使用innerHTML的情況下使用純JavaScript添加大量HTML 如何在不使用“innerHTML”的情況下更改大部分 HTML 從Applescript發送HTML到Javascript時，如何正確轉義雙引號？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM