使用 onClick 和 innerHTML 时如何正确转义一大块 HTML?
How can I properly escape a large block of HTML when using onClick and innerHTML?
这是我的 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 link:https://jsfiddle.net/zwtr96se/
尝试:
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>
您可以使用模板字符串;
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;
})
将'替换为“
<div id="#my_link"></div>
<a href="#" onclick="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>'">Click me</a>
改用下面的代码
<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>
您可以使用以下方法。
将代码分配给 hyperlink 元素的自定义属性。然后在单击事件中,提取该自定义属性的值并分配给 innerHTML。
在这里,我附上一个 JSFiddle link 来演示上述方法。
示例:
<!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/
这是我的 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 link:https://jsfiddle.net/zwtr96se/
尝试:
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>
您可以使用模板字符串;
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;
})
将'替换为“
<div id="#my_link"></div>
<a href="#" onclick="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>'">Click me</a>
改用下面的代码
<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>
您可以使用以下方法。
将代码分配给 hyperlink 元素的自定义属性。然后在单击事件中,提取该自定义属性的值并分配给 innerHTML。 在这里,我附上一个 JSFiddle link 来演示上述方法。
示例:
<!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/