ExecCommand ('копия') не работает программно, только тогда, когда выполняется с помощью консоли Devtools

Question

Источник:

const package = document.querySelector('td[data-bind="text: packageName"'); 
 
    
 
if (package.textContent.indexOf('Adaptive') !== -1) { 
 
    package.click(); 
 
    
 
    const stacks_tab = document.querySelector('ul[class="tabsExpanded"]').children[5]; 
 
    
 
    stacks_tab.click(); 
 
    
 
    function get_sources() { 
 
     const sources = []; 
 
    
 
     const stacks = document.querySelectorAll('span[data-bind="text:duration"]'); 
 
    
 
     for (let i = 0; i < stacks.length; i++) { 
 
      stacks[i].click(); 
 
        
 
      let renditions = document.querySelectorAll('span[class="blockUnSelected"]'); 
 
      renditions[(i+1) * 8 - 1].click(); 
 
    
 
      sources.push(document.querySelectorAll('p[data-bind="text: $data.name"]')[0].textContent); 
 
     } 
 
    
 
     let copy = ''; 
 
    
 
     for (let i = 0; i < sources.length; i++) { 
 
      const change_brackets = sources[i].replace(/\/tveorigin\/vod\/ae\//, ''); 
 
      const no_pd1 = change_brackets.replace(/-pd1/g, ''); 
 
      copy += no_pd1 + ','; 
 
     } 
 
     
 
     if (copy === '') { 
 
      setTimeout(get_sources, 500); 
 
     } else { 
 
      const hidden = document.createElement('input'); 
 
      hidden.value = copy; 
 
      document.querySelector('body').appendChild(hidden); 
 
      hidden.select(); 
 
      
 
      function copy_sources() { 
 
       console.log('running'); 
 
       
 
       hidden.select(); 
 
       
 
       if (!document.execCommand('copy')) { 
 
        setTimeout(copy_sources, 500); 
 
       } else { 
 
        console.log('Sources copied!'); 
 
       } 
 
      } 
 
      
 
      copy_sources(); 
 
     } 
 
    } 
 
    
 
    get_sources(); 
 
} else { 
 
    console.log('There is no Adaptive package in this content.'); 
 
}

Line 45 является то, что не работает.

Этот код не будет делать много смысла, но вот случай использования:

Я пытаюсь автоматизировать часть моей работы, вводя некоторые JavaScript в консоли Chrome DevTools на нашей CMS, которые мы используем для видеоконтента, где я работаю. То, что делает скрипт, - это щелкнуть несколько элементов, затем захватить некоторые файлы и скопировать их в буфер обмена как значения, разделенные запятыми. Раньше у меня было это нормально, но я решил попробовать сценарий лучше ... и теперь document.execCommand('copy') просто не работает.

Как вы можете видеть, я использую некоторую рекурсию для непрерывного выбора входного значения hidden, а затем я пытаюсь его скопировать, и если это не удается, я попробую снова через 500 мс. Я также регистрирую 'running', чтобы убедиться, что функция фактически запущена (она есть). Функция execCommand() сохраняет значение false каждые 500 мс. НО, если я вручную введу его в консоль и запустил, он вернет true и отлично работает, даже если рекурсивная функция продолжает возвращать false. Поэтому по какой-то причине он не будет работать в контексте моего скрипта, но отлично работает при запуске вручную.

Как я уже говорил, он работал программно раньше, но я изменил некоторые вещи, чтобы сделать сценарий лучше и более автоматизированным, и он больше не будет работать. Вот код с execCommand() работает отлично:

const sources = []; 
 
    
 
const stacks = document.querySelectorAll('span[data-bind="text:duration"]'); 
 
    
 
for (let i = 0; i < stacks.length; i++) { 
 
    stacks[i].click(); 
 
      
 
    let renditions = document.querySelectorAll('span[class="blockUnSelected"]'); 
 
    renditions[(i+1) * 8 - 1].click(); 
 
    
 
    sources.push(document.querySelectorAll('p[data-bind="text: $data.name"]')[0].textContent); 
 
} 
 
    
 
let copy = ''; 
 
    
 
for (let i = 0; i < sources.length; i++) { 
 
    const change_brackets = sources[i].replace(/\/tveorigin\/vod\/ae\//, ''); 
 
    const no_pd1 = change_brackets.replace(/-pd1/g, ''); 
 
    copy += no_pd1 + ','; 
 
} 
 
    
 
const hidden = document.createElement('input'); 
 
hidden.value = copy; 
 
document.querySelector('body').appendChild(hidden); 
 
hidden.select(); 
 
document.execCommand('copy');

Я просто проверял этот код и он все еще работает, и копирует текст в буфер обмена, как предполагалось. Единственное примечательное, что я вижу, это то, что в старшем коде я запускаю execCommand() в глобальном контексте, тогда как в новом скрипте он находится в контексте функции. Может ли это иметь к этому какое-то отношение?

Answer 1

Так что решение этого было странным. execCommand() может быть вызван только обработчиком событий пользователя, поэтому мне нужно было подключить прослушиватель click к window, а затем вызвать событие click на узле hidden. Поскольку это вызвало обработчик кликов, это заставило его работать!