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

Question

我正在编写一个注入 jQuery 的小书签，然后尝试访问网页上的某些数据。该页面使用 AngularJS。我想要的JSON数据在Chrome.

中点击查看源代码时可以在脚本标签中看到

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

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

小书签如何解析这个 JSON？

Answer 1

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

如果不是，那么脚本可能在您运行您的小书签之前从 DOM 中删除。你说你"View Source"的时候能看到脚本标签和JSON的数据。 HTML 来源与 DOM 不同。来源用于在页面加载时创建 DOM，但 DOM 可以从那时起更改。

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

Answer 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);
});

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

How to access JSON data in script tag using jQuery in a bookmarklet

jquery

json

bookmarklet

angularjs