如何将hSON数据从html发送到javascript函数

作者: afs-loliaholic
发布时间: 2025-02-05 08:16:36 (23天前)
转自：

5 条回复

0#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 以下是一份工作样本。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> function process(json) { // Do whatever you want with the json object // Example console.log(json[0].name); } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <!DOCTYPE html> <html> <head> <meta charset='UTF-8' />" <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel=\"stylesheet\" href=\"roboto.css\"> <link rel=\"stylesheet\" href=\"webViewLightTheme.css\"> </head> <body> <img src="http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg" onClick="process([{'name':'John', 'age': '30', 'city':'New York'}]);" />" </body> </html> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
别烦我 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 非推荐： </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-js lang-js prettyprint-override"> <code> console.log('onclick= '+document.images[0].getAttribute('onclick')); window.JavaScriptInterface={} window.JavaScriptInterface.showImages=function(x){console.log(x)} document.images[0].click() </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <img src="http://x.y.z/wp-content/uploads/2017/12/android-smart-text-selection-350x175.jpg\" onclick='window.JavaScriptInterface.showImages("[{\"name\":\"John\",\"age\":30,\"city\":\"New York\"}]")'> </code> </pre> </DIV> </DIV> <P> </p> <P> 更好用 <code> addEventListener </code> 像@Reijo那样， </p> </DIV>

编辑
2#
回复此人
青年@ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 试试吧 <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse" rel="nofollow noreferrer"> JSON库 </A> </p> <pre> <code> const img = document.getElementById('img'); img.addEventListener('click', function() { let jsonString = '"[{"name":"John","age":30,"city":"New York"}]'; window.JavaScriptInterface.showImages(JSON.parse(jsonString)); }); </code> </pre> </DIV>

编辑
3#
回复此人
独奏♪ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> JSON数据中的双引号会干扰属性的引号。您需要再次转义JSON数据中的除法引号（添加一个 <code> \ </code> 因此，我们没有看到封闭的内容，并且HTML解析器知道JSON数据中的双引号是您传入的数据的一部分，并不意味着结束引用。 </p> <P> 编辑：或者您可以使用单引号，就像在视口标记中那样，因为HTML和Javascript都不区分单引号和双引号。这可能会使整个事情变得更容易混淆和更容易阅读。 </p> </DIV>

编辑

登录后才能参与评论