将json对象注入html元素答案

【问题标题】：Inject json object to html element将json对象注入html元素
【发布时间】：2020-04-24 16:48:35
【问题描述】：

我创建了一个 html 页面，其中包含以下代码，我想要做的是将 json 元素映射到 data-site-key 的值，以等于对象 site-key 而不是“6LeoeSkTAAAAAA9rkZs5oS82l69OEYjKRZAiKdaF”。

config.json

{
  "sitekey": "6LeWwRkUAAAAAOBsau7KpuC9AV-6J8mhw4AjC3Xz",
  "bankPort": "8080"
}

HTML

     <html>
    <head>
    	<title>Captcha Harvester</title>
    	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
    
    
    <body>
        <p id="output"></p>
    </body>
    
    </head>
    <body>
    
    	<form action="/submit" method="POST">
    		<div class="g-recaptcha" id="captchaFrame" data-sitekey="6LeoeSkTAAAAAA9rkZs5oS82l69OEYjKRZAiKdaF" data-callback="sub"></div>
    	</form>
    
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    
    	<script>
    
    		const remote = require('electron').remote
      		const app = remote.app
      		const ipcRenderer = require('electron').ipcRenderer
    
    		function sub() {
    			ipcRenderer.send('sendCaptcha', grecaptcha.getResponse());
    			grecaptcha.reset();
    		}
    	</script>
    </body>
    </html>

【问题讨论】：

字符串化你的 json 配置，你可以将结果设置为你的 data-siteke 属性
我该怎么做？

标签： javascript html node.js electron

【解决方案1】：

像这样？：

const siteKey = 
{
  sitekey: "6LeWwRkUAAAAAOBsau7KpuC9AV-6J8mhw4AjC3Xz",
  bankPort: "8080"
}

const siteKeyString = JSON.stringify(siteKey)

const div = document.getElementById("divTest")

div.dataset.sitekey = siteKeyString

console.log(div)

&lt;div id="divTest" data-sitekey =""&gt;Inspect Me!&lt;/div&gt;

【讨论】：

是的，但我需要将站点密钥放在单独的文件中。
设置值后，您可以在附加到页面的任何脚本中使用JSON.parse(div.dataset.sitekey) 获取它。
哦等等...是2个文件吗？
我觉得你有点困惑。例如：<script src="script1.js"></script> <script src="script2.js"></script> script1.js 中的每个函数都可以在 script2.js 中使用。并且两个脚本都可以访问 DOM。
文档没有定义？