如何使用javascript更改脚本标签的内容？

Question

我有一个使用pygal库生成的svg ，我想更改在svg内容的script标记内定义的数组的值。 这就是我能够阅读svg内容的方式

svgContent = document.querySelector(".myChart").contentDocument
// under <defs>, the second child contains the script tag. Used eval to parse the js content
svgScriptContent = eval(svgContent.querySelector("defs").children[1].innerHTML)

以下是svg的内容

< script xmlns = "http://www.w3.org/2000/svg"
type = "text/javascript" > window.pygal = window.pygal || {};
window.pygal.config = window.pygal.config || {};
window.pygal.config['f2a1b172-9f14-4f9a-aba9-eff7e05225a3'] = {
    "dynamic_print_values": false,
    "truncate_label": null,
    "inner_radius": 0,
    "print_values": false,
    "xrange": [0, 100],
    "box_mode": "extremes",
    "title": "Correlate: income need (x) vs expenditure (y)",
    "legend_at_bottom_columns": null,
    "height": 560,
    "legend_at_bottom": true,
    "show_legend": false,
    "show_dots": true,
    "explicit_size": false,
    "y_labels_major": [0, 60, 120],
    "show_minor_x_labels": false,
    "width": 900,
    "force_uri_protocol": "https",
    "half_pie": false,
    "style": {
        "major_label_font_family": "Roboto",
        "title_font_family": "Roboto",
        "stroke_opacity": ".8",
        "legend_box_size": 19,
        "legend_font_family": "Roboto",
        "colors": ["#FF4A6E", "#58CABF", "#47A4D1", "#ca8658", "#FFA54D"],
        "legend_font_size": 19,
        "no_data_font_family": "Roboto",
        "major_label_font_size": 19,
        "value_background": "rgba(229, 229, 229, 1)",
        "ci_colors": [],
        "label_font_family": "Roboto",
        "label_font_size": 19,
        "tooltip_font_size": 25,
        "value_font_size": 19,
        "font_family": "Roboto",
        "opacity": ".6",
        "foreground": "rgba(0, 0, 0, .87)",
        "plot_background": "#FFFFFF",
        "x_labels_major_count": 3,
        "value_label_font_size": 19,
        "value_label_font_family": "Roboto",
        "background": "#FFFFFF",
        "no_data_font_size": 64,
        "value_colors": [],
        "guide_stroke_dasharray": "4,4",
        "transition": "150ms",
        "foreground_subtle": "rgba(0, 0, 0, .54)",
        "value_font_family": "Roboto",
        "tooltip_font_family": "Roboto",
        "title_font_size": 25,
        "y_labels_major_count": 3,
        "stroke_opacity_hover": ".9",
        "major_guide_stroke_dasharray": "6,6",
        "opacity_hover": ".8",
        "foreground_strong": "rgba(0, 0, 0, 1)"
    },
    "x_label_rotation": 0,
    "fill": false,
    "missing_value_fill_truncation": "x",
    "zero": 0,
    "margin_right": null,
    "interpolation_parameters": {},
    "x_labels_major": [0, 50, 100],
    "rounded_bars": null,
    "title_spacing": 7,
    "show_y_labels": true,
    "dots_size": 2.5,
    "legend_spacing": 17,
    "show_y_guides": true,
    "show_minor_y_labels": false,
    "x_labels": null,
    "y_title": null,
    "order_min": null,
    "formatter": null,
    "disable_xml_declaration": false,
    "strict": false,
    "css": ["file://style.css", "file://graph.css"],
    "tooltip_fancy_mode": true,
    "defs": [],
    "show_only_major_dots": false,
    "y_label_rotation": 0,
    "show_x_labels": true,
    "min_scale": 4,
    "show_x_guides": true,
    "spacing": 10,
    "x_labels_major_count": null,
    "pretty_print": false,
    "tooltip_border_radius": 0,
    "interpolate": null,
    "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"],
    "y_labels": null,
    "stroke_style": {
        "width": 2
    },
    "print_labels": false,
    "interpolation_precision": 250,
    "x_title": null,
    "y_labels_major_every": null,
    "logarithmic": false,
    "legends": ["var1", "var2", "var3", "var4", "var5"],
    "max_scale": 16,
    "print_zeroes": true,
    "no_data_text": "No data",
    "truncate_legend": null,
    "x_labels_major_every": null,
    "secondary_range": null,
    "legend_box_size": 12,
    "no_prefix": false,
    "stroke": false,
    "stack_from_top": false,
    "include_x_axis": false,
    "range": [0, 120],
    "classes": ["pygal-chart"],
    "margin_top": null,
    "margin_left": null,
    "y_labels_major_count": null,
    "margin_bottom": null,
    "inverse_y_axis": false,
    "margin": 20,
    "allow_interruptions": false,
    "print_values_position": "center"
} < /script>

正如你所看到的（接近尾声），有一个名为legend的属性，它是一个包含某些值的数组

"legends": ["var1", "var2", "var3", "var4", "var5"]

我可以通过执行这样的操作来访问现有密钥的值

tooltipLegends = svgScriptContent.legends
console.log(tooltipLegends)

现在我想用另一个值数组替换数组，这就是我所做的

updatedTooltipLegends = ["var6", "var7", "var8", "var9", "var10"]  
svgScriptContent.legends = updatedTooltipLegends

但是script标签的内容不会更新。 我究竟做错了什么？

另一个想法是内容可以作为文本读取， regex可用于替换数组，但不确定我该怎么做，如果这是一个好主意。

Answer 1

script标签的内容是code 。 当遇到script标签时，该代码被执行并创建一个对象（带有嵌套对象和数组）并将其分配给window.pygal 。

您的代码读取script的代码并运行它，这几乎肯定是不必要的并且可能是不可取的。 代码可能已经运行，并在正确的上下文中运行（鉴于您使用contentDocument ，看起来您的.myChart元素是HTMLObjectElement或iframe或类似元素）。 相反，您的eval在您的窗口中运行它，而不是它似乎打算运行的窗口。

相反，修改代码最初创建的对象。 代码将它放在它运行的窗口的pygal属性上，所以你应该能够做到这一点：

document.querySelector(".myChart").contentWindow.pygal.config['f2a1b172-9f14-4f9a-aba9-eff7e05225a3'].legends = ["var6", "var7", "var8", "var9", "var10"];

如果您不知道将使用什么 GUID，并且始终只有一个，您可以这样做：

const pygal = document.querySelector(".myChart").contentWindow.pygal;
pygal.config[Object.keys(pygal.config)[0]].legends = ["var6", "var7", "var8", "var9", "var10"];