Передача объекта PHP в скрипт нарушает работу javascript в WordPress

#javascript #php #wordpress #google-sheets

#javascript #php #wordpress #google-sheets

Вопрос:

Я создаю приложение для отображения статистики и управления ею в WordPress.

Я получаю свои данные из таблиц Google и передаю их в скрипт через wp_localize_script.

Я только что заметил, что это нарушает функциональность javascript в других сценариях, хотя я понятия не имею, почему.

Особенности:

получение данных из листов:

 function get_stats_from_sheets()
{
        require_once dirname(dirname(__FILE__)) . '/stat-interface/vendor/autoload.php';
        $apikey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
        $spreadsheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
        $ranges = ["'GI'!A1:F", "'dsfdf'!A1:C", "'dfd'!A1:G", "'dsfdf'!A1:B", "'dsfdsf'!A1:D"];
        $params = ['ranges' => $ranges, 'majorDimension' => 'COLUMNS'];
        $client = new GoogleClient();
        $client->setApplicationName("dsfdf");
        $client->setDeveloperKey($apikey);

        $service = new Google_Service_Sheets($client);
        $response = $service->spreadsheets_values->batchGet($spreadsheetId, $params);
        $array = (array) $response;
        $data = $array['valueRanges'];
        return $data;
}
  

Локализовать скрипт и другие загруженные скрипты:

 add_action('wp_enqueue_scripts', 'my_custom_script_load', 11);

function my_custom_script_load(){
    if (is_page(603484)):
    wp_enqueue_script('spamspan', get_stylesheet_directory_uri() . '/js/spamspan.js', array('jquery'), '0.2', true);

        wp_enqueue_style('stat', get_stylesheet_directory_uri() . '/css/stat.css');
        wp_enqueue_script('chartJs', 'https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js', '', '', true);
        wp_enqueue_script('ublcharts', get_stylesheet_directory_uri() . '/js/ublcharts.js', '', '', true);
        wp_localize_script('ublcharts', 'statsData', get_stats_from_sheets());
        wp_enqueue_script('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js', array('jquery'), '', false);
        wp_enqueue_style('bootstrapCss', 'https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css');
        wp_enqueue_script('pdfmake', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js', '', true);
        wp_enqueue_script('vfs_fonts', 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.min.js', '', '', true);
        wp_register_script('stat-pdf', get_stylesheet_directory_uri() . '/js/stat-pdf.js', '', '', true);
        wp_localize_script('stat-pdf', 'home_url', array('url' => get_stylesheet_directory_uri(), 'home' => get_home_url()));
        wp_enqueue_script('stat-pdf');
    endif;
}
  

Получены ошибки:

 spamspan.js?ver=0.2:50 
Uncaught TypeError: document.createTextNode is not a function
    at spamSpan (spamspan.js?ver=0.2:50)

_microtask.js:36 Uncaught (in promise) TypeError: document.createTextNode is not a function
    at t.exports (_microtask.js:36)
    at Object.i.m.n (es6.promise.js:13)
    at i (bootstrap:19)
    at Object.i.m.n (promise.js:4)
    at i (bootstrap:19)
    at Object.i.m.n (promise.js:1)
    at i (bootstrap:19)
    at Object.<anonymous> (index.js:29)
    at Object.i.m.n (pdfmake.min.js?ver=1:37)
    at i (bootstrap:19)
  

ошибка spamspan на самом деле не важна для меня, но это был показатель того, что что-то сломалось (потенциальная причина, по которой мой PDF-скрипт не работает).

Отключив все другие скрипты и очереди, я сузил круг поиска до локализованных данных из Google.

Второе сообщение об ошибке возникает, когда я пытаюсь сгенерировать pdf через pdfmake.js с объектом данных. В обоих случаях говорится: «document.createTextNode не является функцией».

Я использую pdfmake.js также и на других страницах, и там это работает без проблем, поэтому я взял рабочий код pdfmake script и сократил его до минимума, но я получаю вышеупомянутое сообщение об ошибке, несмотря ни на что.

Кто-нибудь может сказать мне, почему это происходит и как этого избежать?

Ответ №1:

Проблема заключалась в фрагменте плохого кода Javascript, который я написал.

      let mPoint = (document.createTextNode = point);
  

Я все еще нахожу интересным, что ошибка консоли приводит меня куда угодно, кроме ошибочной строки в моем скрипте.

После исправления этого ошибок больше не было.