Как я могу загрузить несколько Highcharts изнутри iframes?

Question

Цель

У меня есть веб-страница, на которой есть много фреймов, которые сами имеют график старшей диаграммы. Я нашел функцию для экспорта графиков в формате pdf, но поскольку графики не были доступны мне напрямую, так как они находятся в iframes, я не могу использовать встроенную функцию экспорта.

Что я пробовал

Мне удалось получить элемент html, в котором отображаются графики, а затем я снова попытался инициализировать его как объект Highcharts, чтобы использовать встроенную функцию экспорта. Я смог легко инициализировать с помощью этого кода:

var graphobject = $("graph-container").highcharts();

он возвращает мне объект highcharts, который я могу передать этой функции, и экспортирует мой график в формате pdf при нажатии кнопки.

$('#export-pdf').click(function () {
        Highcharts.exportCharts([grapharray], {
            type: 'application/pdf'
        });
    });

Вот скрипка для этого.

Проблема

Теперь, чтобы игнорировать предупреждения cors-header, я создал сервер django и разместил его на хосте. мои 2 html-файла, один с двумя графиками, другой с кнопкой. Я использовал этот код для получения моего html-объекта,

var iframe = document.getElementById('myIframeContent');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var graphdivs = innerDoc.getElementsByClassName("graph-container");

var test = $(graphdiv).highcharts();
console.log(test);


var graphobject = []
for (var i = 0; i < graphdivs.length; i++)
   graphobject[i] = $(graphdivs[i]).highcharts();         ## this line does not work or throw any error

, но когда я пытаюсь инициализировать его как объекты высокой диаграммы, я не получаю никакого ответа, никакой ошибки, и они не преобразуются в объекты высокой диаграммы. Что мне делать ?? правильный метод? Я чувствую, что очень близок к этому решению, но пока.

Вот скрипка с моим кодом. Игнорировать части django.

Весь исходный код

graph.html

{% block content %}
{% include 'classroom/students/_header.html' with active='new' %}


<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Inconsolata"/>

<iframe id="myIframeContent" src="{% url 'students:taken_quiz_list' %}">
</iframe>


<div id="buttonrow">
    <button id="export-pdf">Export to PDF</button>
</div>

<div class="card">
    <table class="table mb-0">
        <thead>
        <tr>
            <th>Quiz</th>
            <th>Subject</th>
            <th>Length</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        {% for quiz in quizzes %}
        <tr>
            <td class="align-middle">{{ quiz.name }}</td>
            <td class="align-middle">{{ quiz.subject.get_html_badge }}</td>
            <td class="align-middle">{{ quiz.questions_count }} questions</td>
            <td class="text-right">
                <a href="{% url 'students:take_quiz' quiz.pk %}" class="btn btn-primary">Start quiz</a>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td class="bg-light text-center font-italic" colspan="4">No quiz matching your interests right now.</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!--<script src="https://code.highcharts.com/modules/exporting.js"></script>-->

<script type="text/javascript">
$(window).on('load', function () {

    Highcharts.getSVG = function (charts) {
        var svgArr = [],
            top = 0,
            width = 0;

        Highcharts.each(charts, function (chart, i) {
            var svg = chart.getSVG(),
                // Get width/height of SVG for export
                svgWidth = +svg.match(
                    /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
                )[1],
                svgHeight = +svg.match(
                    /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
                )[1];

            svg = svg.replace(
                '<svg',
                '<g transform="translate(' + i * svgWidth + ',' + 0 + ')" '
            );
            svg = svg.replace('</svg>', '</g>');

            top += svgHeight;
            width = Math.max(width, 2 * svgWidth);

            svgArr.push(svg);
        });

        return '<svg height="' + (top / 2) + '" width="' + width +
            '" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
            svgArr.join('') + '</svg>';
    };

    Highcharts.exportCharts = function (charts, options) {

        options = Highcharts.merge(Highcharts.getOptions().exporting, options);

        // Post to export server
        Highcharts.post(options.url, {
            filename: options.filename || 'chart',
            type: options.type,
            width: options.width,
            svg: Highcharts.getSVG(charts)
        });
    };
    console.log("hi");
    var iframe = document.getElementById('myIframeContent');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var graphdiv = innerDoc.getElementById("container1");
    var graphdivs = innerDoc.getElementsByClassName("graph-container");

    var test = $(graphdiv).highcharts();
    console.log(test);


    var graphobject = []
    for (var i = 0; i < graphdivs.length; i++)
        graphobject[i] = $(graphdivs[i]).highcharts();


    var grapharray = []
    for (var i = 0; i < graphdivs.length; i++)
        grapharray.push("graphobject[" + i + "]");

    console.log(grapharray);
    $('#export-pdf').click(function () {
        Highcharts.exportCharts([grapharray], {
            type: 'application/pdf'
        });
    });
});





</script>
{% endblock %}

iframe.html

{% extends 'base.html' %}

{% block content %}
{% include 'classroom/students/_header.html' with active='new' %}


<link rel="stylesheet" media="screen" href="//fonts.googleapis.com/css?family=Inconsolata"/>

<iframe id="myIframeContent" src="{% url 'students:taken_quiz_list' %}">
</iframe>


<div id="buttonrow">
    <button id="export-pdf">Export to PDF</button>
</div>

<div class="card">
    <table class="table mb-0">
        <thead>
        <tr>
            <th>Quiz</th>
            <th>Subject</th>
            <th>Length</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        {% for quiz in quizzes %}
        <tr>
            <td class="align-middle">{{ quiz.name }}</td>
            <td class="align-middle">{{ quiz.subject.get_html_badge }}</td>
            <td class="align-middle">{{ quiz.questions_count }} questions</td>
            <td class="text-right">
                <a href="{% url 'students:take_quiz' quiz.pk %}" class="btn btn-primary">Start quiz</a>
            </td>
        </tr>
        {% empty %}
        <tr>
            <td class="bg-light text-center font-italic" colspan="4">No quiz matching your interests right now.</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!--<script src="https://code.highcharts.com/modules/exporting.js"></script>-->

<script type="text/javascript">
$(window).on('load', function () {

    Highcharts.getSVG = function (charts) {
        var svgArr = [],
            top = 0,
            width = 0;

        Highcharts.each(charts, function (chart, i) {
            var svg = chart.getSVG(),
                // Get width/height of SVG for export
                svgWidth = +svg.match(
                    /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
                )[1],
                svgHeight = +svg.match(
                    /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
                )[1];

            svg = svg.replace(
                '<svg',
                '<g transform="translate(' + i * svgWidth + ',' + 0 + ')" '
            );
            svg = svg.replace('</svg>', '</g>');

            top += svgHeight;
            width = Math.max(width, 2 * svgWidth);

            svgArr.push(svg);
        });

        return '<svg height="' + (top / 2) + '" width="' + width +
            '" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
            svgArr.join('') + '</svg>';
    };

    Highcharts.exportCharts = function (charts, options) {

        options = Highcharts.merge(Highcharts.getOptions().exporting, options);

        // Post to export server
        Highcharts.post(options.url, {
            filename: options.filename || 'chart',
            type: options.type,
            width: options.width,
            svg: Highcharts.getSVG(charts)
        });
    };
    console.log("hi");
    var iframe = document.getElementById('myIframeContent');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    var graphdiv = innerDoc.getElementById("container1");
    var graphdivs = innerDoc.getElementsByClassName("graph-container");

    var test = $(graphdiv).highcharts();
    console.log(test);


    var graphobject = []
    for (var i = 0; i < graphdivs.length; i++)
        graphobject[i] = $(graphdivs[i]).highcharts();


    var grapharray = []
    for (var i = 0; i < graphdivs.length; i++)
        grapharray.push("graphobject[" + i + "]");

    console.log(grapharray);
    $('#export-pdf').click(function () {
        Highcharts.exportCharts([grapharray], {
            type: 'application/pdf'
        });
    });
});





</script>
{% endblock %}