Question

这是我的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/

Answer 1

将'替换为＆amp; quot;

<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/

Answer 2

您可以使用以下方法。

将代码分配给超链接元素的自定义属性。然后在单击事件中，提取该自定义属性的值并分配给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/

Answer 3

尝试：

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>

Answer 4

你可以使用模板字符串;

if(Settings.System.canWrite(this)){
    // change setting here
}
else{
    //Migrate to Setting write permission screen. 
    Intent intent = new Intent(Settings.ACTION_MANAGE_WRITE_SETTINGS);
    intent.setData(Uri.parse("package:" + mContext.getPackageName()));
    startActivity(intent);
}

Answer 5

使用以下代码

<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>

在使用onClick和innerHTML时，如何正确地逃避大块HTML？

5 个答案: