Передача переменной js из WBApp CEF в CD

Здравствуйте, уважаемые форумчане. Только вчера обновился до последней версии и стал изучать новый браузерный движок и функционал по написанию своих js скриптов.

Сперва хочу поблагодарить разработчиков за этот функционал, так как работа со странице через js многократно расширяет функционал и так добротной программы CD.

Ну а теперь сам вопрос: возможно ли передавать данные собранные js в виде обычного return переменной или массива обратно в CD или пока его функционал ограничивается только действиями типа кликов и проверкой определенных условий на странице?

Объясню подробнее на простенькой задаче спарсить title и передать данные POST на php скрипт.

Код:

if (document.querySelector('TITLE')){
    return document.querySelector('TITLE').innerHTML;
} else {
    return 'нет title';
}

Вопрос: как в CD передать то, что возвращает этот или другой js скрипт?

Эта задача решается и обычными границами парсинга, но они не сравняться с возможностью js по работе с DOM, а задачи у меня бывают очень нетривиальными.

Пока видятся только костыли с отправкой POST данных через ajax в самом скрипте js. Но может я ошибаюсь и плохо изучил функционал.

 

Здравствуйте.

Данные из JS -> в список событий:



Данные из списка событий -> в результат работы WBApp:

Код:

[ADDTORESULT]:{JSMESSAGE}

 

Здравствуйте, возникло еще несколько вопросов.

1. Возможно ли таким способом передавать переменную или массив?
2. Как получать эти данные в самом Content Downloader, то есть передавать их из WBApp в CD?

 

Поддерживаю вопрос!
Если нужно передать определенный заранее известный текст то все работает.

Код:

alert("[JSMESSAGE]:МОЙ ТЕКСТ");

Но что делать если передать нужно значение переменной или допустим innerHTML какого то узла то не один из способов не сработал.

Код:

alert([JSMESSAGE]:DOMNODE.innerHTML);
alert("[JSMESSAGE]:DOMNODE.innerHTML");
alert("[JSMESSAGE]:"DOMNODE.innerHTML);

Вопрос к автору как это возможно реализовать?

 

Немного поскрипев мозгом и вспомнив основы JS сам нашел ответ на свой вопрос и вопрос Vladyslav. По сути все что мы должны это передать в alert текстовую строку которая будет начинаться с [JSMESSAGE]: а дальше вспомнив что строки в JS можно складывать через "+" то получаем следующий рабочий вариант alert("[JSMESSAGE]:" + DOMNODE.innerHTML) Так же понимая то что по сути мы можем передавать только строку то для передачи других типов данных таких как массивы и объекты их нужно привести к строке. Самым удобным мне показался вариант с превращением данных в их текстовое представление в формате JSON. Ниже пример из моего проекта.

Спойлер: Исходный HTML

Код:

<ul class="wpmf_media_library">
  <li class="open" data-id="0">
    <div class="wpmf-item" data-id="0">
      <div class="wpmf-item-inside ui-droppable" data-id="0" style="padding-left: -20px">
        <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
        ><a class="wpmf-text-item" data-id="0"
          ><i class="wpmf-item-icon wpmf-item-icon-root"></i><span class="wpmf-item-title">Media Library</span></a
        ><span class="wpmf-item-count">2939</span>
      </div>
    </div>
  </li>
  <li class="open selected" data-id="837">
    <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="837">
      <div class="wpmf-item-inside ui-droppable" data-id="837" style="padding-left: 0px">
        <a class="wpmf-toggle-icon" onclick="wpmfFoldersTreeModule.toggle(837)"
          ><i class="tree_arrow_right_icon wpmf-arrow"></i></a
        ><a class="wpmf-text-item" data-id="837"
          ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
          ><span class="wpmf-item-title">benzo</span></a
        ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
      </div>
    </div>
    <ul class="">
      <li class="closed" data-id="840">
        <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="840">
          <div class="wpmf-item-inside ui-droppable" data-id="840" style="padding-left: 15px">
            <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
            ><a class="wpmf-text-item" data-id="840"
              ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
              ><span class="wpmf-item-title">Assistant</span></a
            ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
          </div>
        </div>
      </li>
      <li class="closed" data-id="841">
        <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="841">
          <div class="wpmf-item-inside ui-droppable" data-id="841" style="padding-left: 15px">
            <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
            ><a class="wpmf-text-item" data-id="841"
              ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
              ><span class="wpmf-item-title">Baikal</span></a
            ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
          </div>
        </div>
      </li>
      <li class="closed" data-id="842">
        <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="842">
          <div class="wpmf-item-inside ui-droppable" data-id="842" style="padding-left: 15px">
            <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
            ><a class="wpmf-text-item" data-id="842"
              ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
              ><span class="wpmf-item-title">Baikal-Pro</span></a
            ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
          </div>
        </div>
      </li>
      <li class="closed" data-id="843">
        <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="843">
          <div class="wpmf-item-inside ui-droppable" data-id="843" style="padding-left: 15px">
            <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
            ><a class="wpmf-text-item" data-id="843"
              ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
              ><span class="wpmf-item-title">Belorus</span></a
            ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
          </div>
        </div>
      </li>
      <li class="closed" data-id="845">
        <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="845">
          <div class="wpmf-item-inside ui-droppable" data-id="845" style="padding-left: 15px">
            <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
            ><a class="wpmf-text-item" data-id="845"
              ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
              ><span class="wpmf-item-title">Craft-tec</span></a
            ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
          </div>
        </div>
      </li>
    </ul>
  </li>
  <li class="closed" data-id="838">
    <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="838">
      <div class="wpmf-item-inside ui-droppable" data-id="838" style="padding-left: 0px">
        <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
        ><a class="wpmf-text-item" data-id="838"
          ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
          ><span class="wpmf-item-title">electro</span></a
        ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
      </div>
    </div>
  </li>
  <li class="closed" data-id="839">
    <div class="wpmf-item ui-draggable ui-draggable-handle" data-id="839">
      <div class="wpmf-item-inside ui-droppable" data-id="839" style="padding-left: 0px">
        <a class="wpmf-toggle-icon wpmf-notoggle-icon"><i class="tree_arrow_right_icon"></i></a
        ><a class="wpmf-text-item" data-id="839"
          ><i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i
          ><span class="wpmf-item-title">Rasxodnie-materiali</span></a
        ><span class="wpmf-item-count">0</span><span class="wpmf-item-count-all">0</span>
      </div>
    </div>
  </li>
</ul>

Спойлер: Код для JS скрипта

Код:

//исходная ссылка https://sait.com/#[CDDATA:1]837[/CDDATA]
//формируем текстовую строку из текста и передаваемого из CD 
//параметра для использования ее в querySelector,
var selector = 'a[data-id="'+[CDDATA:1]+'"]';
//получаем ссылку на ноду с тегом <a> и дата атрибутом data-id="837"
DOMNODE = document.querySelector(selector);
//получаем ближайшего родителя с тегом <li>
PARENT_LI_DOMNODE = DOMNODE.closest('li')
//получаем в переменную псевдо массив со всеми 
//дочерними узлами по селектору 'li.closed '
var AllNode = PARENT_LI_DOMNODE.querySelectorAll('li.closed ')
//создаем массив
var arr = []
//перебираем псевдо массив
for (var element of AllNode){
    //для каждой ноды внутри псевдо массива находим
    //вложенный элемент по селектору 'span.wpmf-item-title'
    var spanNode = element.querySelector('span.wpmf-item-title')
    //добавляем в массив текст из найденной выше ноды
    arr.push(spanNode.innerText);
}
//так как в JSMESSAGE можно передать только строку
//то преобразую данные в текстовое представление в виде строки в JSON формате
var arrInTxt = JSON.stringify(arr)
//передаем в список событий внутренний HTML узла, данные из переменной
//обернутые в елочку и массив преобразованный к строке 
alert("[JSMESSAGE]:" + DOMNODE.innerHTML + "<<<" + selector + ">>>" + arrInTxt);

Далее вставляем следующий код в список событий

Спойлер: Код для списка событий

Код:

▒Обнуляем накопленные к этому моменту данные в результатах парсинга
[RESETSTOREDCODE]
[WAIT]:500
▒Вставляем описанный выше скрипт
[DOSCRIPT]:ПолучитьДанныеУзла
▒Обязательно делаем паузу чтоб скрипт успел отработать
[WAIT]:1000
▒Добавляем данные к результатам парсинга
[ADDTORESULT]:{JSMESSAGE}
[WAIT]:1000

В итоге получаем такие данные в результатах парсинга

Спойлер: Результат в CD

Код:

<i class="material-icons wpmf-item-icon" style="color: #b2b2b2">folder</i>
<span class="wpmf-item-title">benzo</span><<<a[data-id="837"]>>>
["Assistant","Baikal","Baikal-Pro","Belorus","Craft-tec"]

Как видим тут есть и данные из innerHTML узла и данные из нашей переменной и текстовое представление массива данных.