Question

我尝试自己实现以下javascript示例：

我创建了2个文件：

的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test</title>
        <script type="text/javascript" src="1.js"></script>
    </head>
    <body>
        <p>hello</p>
        <button id="copy">Copy</button>
        <button onclick="myFunction()">Click me</button>    
    </body>
</html>

1.js

// Copies a string to the clipboard. Must be called from within an event handler such as click.
// May return false if it failed, but this is not always
// possible. Browser support for Chrome 43+, Firefox 42+, Edge and IE 10+.
// No Safari support, as of (Nov. 2015). Returns false.
// IE: The clipboard feature may be disabled by an adminstrator. By default a prompt is
// shown the first time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}

document.querySelector("#copy").onclick = function() {
    var result = copyToClipboard("longlonglongtext");
    console.log("copied?", result);
};

function myFunction() 
{
    alert("Hello");
}

屏幕上显示“Hello”的第二个按钮警报正在工作，第一个没有，这就是将“longlonglongtext”复制到键盘上。

这不是浏览器问题，因为jsfiddle的示例与我的firefox 47完美配合。

可能是什么问题？

Answer 1

问题：您尝试为＆＃34; copy＆＃34;定义事件处理程序的方式在呈现元素或可用元素之前，javascript（1.js文件）中的按钮。

document.querySelector("#copy").onclick = function() {
    var result = copyToClipboard("longlonglongtext");
    console.log("copied?", result);
};

您可以通过不同方式解决此问题。

解决方案1：在body标记结束之前移动引用1.js文件的脚本标记。

<script type="text/javascript" src="1.js"></script>

e.g。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Test</title>        
    </head>
    <body>
        <p>hello</p>
        <button id="copy">Copy</button>
        <button onclick="myFunction()">Click me</button>    
        <script type="text/javascript" src="1.js"></script>
    </body>
</html>

解决方案2：使用＆＃34; DOMContentLoaded＆＃34;事件列表

e.g。

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector("#copy").onclick = function() {
        var result = copyToClipboard("longlonglongtext");
        console.log("copied?", result);
    };
})

Javascript复制文本不起作用

1 个答案: