如何在小书签中使用 jQuery 访问脚本标签中的 JSON 数据答案

【问题标题】：How to access JSON data in script tag using jQuery in a bookmarklet如何在小书签中使用 jQuery 访问脚本标签中的 JSON 数据
【发布时间】：2016-08-26 17:35:13
【问题描述】：

我正在编写一个注入 jQuery 的小书签，然后尝试访问网页上的某些数据。该页面使用 AngularJS。在 Chrome 中点击查看源代码时，可以在脚本标签中看到我想要的 JSON 数据。

<script type="text/json" class="menu-page-data" page="0">
    /* The JSON data */
</script>

我无法通过JSON.parse($('.menu-page-data').html()) 访问这些数据。

书签如何解析这个 JSON？

【问题讨论】：

如果代码隐藏正在删除它，它不能。另外，$('.menu-page-data') 不会返回 null，或者您没有包含 jquery。
@KevinB 谢谢，你是对的。我更正了关于 null 的问题。
检查元素并在页面加载后查看它是否仍然是 dom 的一部分。我的猜测是不是。如果不是，那你就很不走运了。
@KevinB 我无法检查元素，因为此数据位于脚本标记中，并且仅在单击按钮后才会显示在页面上。我很困惑为什么在查看源代码中显示的内容无法被书签访问。

标签： jquery angularjs json bookmarklet

【解决方案1】：

console.log($('.menu-page-data').html()) 是否显示 JSON 数据？如果是，那么问题不在于访问，而在于解析。

如果不是，那么可能是在您运行小书签之前脚本已从 DOM 中删除。您说“查看源代码”时可以看到脚本标签和JSON数据。 HTML 源代码和 DOM 并不相同。源用于在页面加载时创建 DOM，但 DOM 可以从那时起更改。

访问原始源代码的一种可能方法是使用 AJAX 调用。然后你可以做一些字符串操作来提取 JSON 数据。它不漂亮，但它可以工作。它可能看起来像这样：$.ajax(document.location.href).done(function(htmltext){ /*string manipulation*/ });

【讨论】：

$.ajax(document.location.href).done(function (htmltext) {console.log($('.menu-page-data').html()); }); 显示undefined。简单地尝试console.log 数据也不起作用。
如果你写的那个短代码可以工作，我会从一开始就把它放在我的答案中。不幸的是，该代码中的错误表明您可能正在尝试以远远超出您当前理解的水平进行编程。这表明缺乏对一些关键核心概念的理解。

【解决方案2】：

在@DG. 的指导下，以下代码用于获取<script> 标记内的文本并将其解析为JSON。

$.get(document.location.href).done(function (htmlText) {
    var scriptClassIndex = htmlText.indexOf('menu-page-data');
    var scriptSubStr = htmlText.substring(scriptClassIndex);
    var scriptEndIndex = scriptSubStr.indexOf('</script>');

    var justScript = scriptSubStr.substring(0, scriptEndIndex);
    justScript = justScript.replace('menu-page-data" page="0">', '');
    justScript = justScript.trim();
    var jsonData = jQuery.parseJSON(justScript);
});

【讨论】：