execCommand('copy')无法以编程方式工作,仅在通过DevTools控制台

时间:2017-02-19 07:25:06

标签: javascript copy-paste execcommand javascript-injection

来源:

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控制台中注入一些JavaScript来自动完成部分工作,我们将其用于我工作的视频内容。脚本的作用是单击几个元素,然后抓取一些文件位置并将它们作为逗号分隔值复制到剪贴板。我以前工作得很好,但我决定尝试让脚本变得更好......现在document.execCommand('copy')无效。

正如您所看到的,我使用一些递归来连续选择hidden输入值,然后我尝试复制它,如果失败,我会在500毫秒内再次尝试。我还记录'running'以确保函数实际运行(它是)。 execCommand()函数每500ms保持返回false。但是,如果我手动将其键入控制台并运行它,它将返回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(),而在新脚本中,它在函数上下文中。这可能与它有关吗?

1 个答案:

答案 0 :(得分:1)

所以对此的解决方案很奇怪。 execCommand()只能由用户事件处理程序触发,因此我必须将click侦听器附加到window,然后在click上调用hidden事件{1}}节点。因为它触发了一个点击处理程序,这使它工作!