의 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.'); 
 
}

라인 (45)가 작동하지 않는 것입니다.

나는 우리가 사용하는 우리의 CMS에서 Chrome DevTools로 콘솔에 일부 자바 스크립트를 주입하여 내 작업의 일부를 자동화하기 위해 노력하고있어 :

그 코드가 여기에 의미를 많이 만들지 만,하지 않을 것이다는 사용 사례입니다 내가 일하는 비디오 콘텐츠를 위해. 스크립트가 수행하는 작업은 몇 가지 요소를 클릭 한 다음 일부 파일 위치를 잡고 쉼표로 구분 된 값으로 클립 보드에 복사하는 것입니다. 나는이 작업을 전에는 잘 했었지만, 스크립트를 더 잘 만들어 보려고 결심했다. 이제는 document.execCommand('copy')이 작동하지 않는다.

알다시피, 나는 약간의 재귀를 사용하여 연속적으로 hidden 입력 값을 선택한 다음 복사하려고 시도합니다. 실패하면 500ms 후에 다시 시도합니다. 또한 함수가 실제로 실행 중인지 확인하기 위해 'running'을 기록합니다. execCommand() 함수는 500ms마다 false를 계속 반환합니다. 하지만 수동으로 콘솔에 입력하고 실행하면 true를 반환하고 재귀 함수가 false를 계속 반환하더라도 제대로 작동합니다. 따라서 어떤 이유로 인해 스크립트의 컨텍스트에서는 작동하지 않지만 수동으로 실행하면 완전히 정상적으로 작동합니다.

전에 말했듯이 이전에 프로그래밍 방식으로 작동했지만 스크립트를 더 좋게 만들고 자동화하기 위해 일부를 변경했으며 더 이상 작동하지 않습니다.

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()와 코드입니다. 주목할만한 유일한 차이점은 이전 코드에서는 글로벌 컨텍스트에서 execCommand()을 실행하는 반면, 새 스크립트에서는 함수 컨텍스트에있는 것입니다. 이것과 관련이있을 수 있습니까?

Answer 1

그래서이 문제에 대한 해결책은 이상합니다. execCommand()은 사용자 이벤트 핸들러에 의해서만 트리거 될 수 있으므로 click 수신기를 window에 연결 한 다음 hidden 노드에서 click 이벤트를 호출해야합니다. 클릭 처리기가 트리거되어 작동하게되었습니다.