clipboard 剪切板js chrom参考
clipboard api参考：
https://www.inovex.de/blog/clipboard-api/
https://w3c.github.io/clipboard-apis/
mdn的文档：https://developer.mozilla.org/en-US/docs/Web/API/Clipboard
js promise详解：https://www.jb51.net/article/139825.htm
有深度的示例：http://help.dottoro.com/ljwexqxl.php
clipboard js api实现
js示例代码:
navigator.clipboard.writeText(info).then(function() { /* clipboard successfully set */ showMsg("Success to write clipboard:"+info) }, function() { showMsg("Fail to write clipboard!") /* clipboard write failed */ });
由idl自动生成的绑定代码进入：
自动生成的绑定代码：v8_clipboard.cc
void V8Clipboard::WriteTextMethodCallback(const v8::FunctionCallbackInfo<v8::Value>& info) { RUNTIME_CALL_TIMER_SCOPE_DISABLED_BY_DEFAULT(info.GetIsolate(), "Blink_Clipboard_writeText"); ExecutionContext* execution_context_for_measurement = CurrentExecutionContext(info.GetIsolate()); UseCounter::Count(execution_context_for_measurement, WebFeature::kAsyncClipboardAPIWriteText); clipboard_v8_internal::WriteTextMethod(info); } static void WriteTextMethod(const v8::FunctionCallbackInfo<v8::Value>& info) { ExceptionState exception_state(info.GetIsolate(), ExceptionState::kExecutionContext, "Clipboard", "writeText"); ExceptionToRejectPromiseScope reject_promise_scope(info, exception_state); // V8DOMConfiguration::kDoNotCheckHolder // Make sure that info.Holder() really points to an instance of the type. if (!V8Clipboard::HasInstance(info.Holder(), info.GetIsolate())) { exception_state.ThrowTypeError("Illegal invocation"); return; } Clipboard* impl = V8Clipboard::ToImpl(info.Holder()); ScriptState* script_state = ScriptState::ForRelevantRealm(info); if (UNLIKELY(info.Length() < 1)) { exception_state.ThrowTypeError(ExceptionMessages::NotEnoughArguments(1, info.Length())); return; } V8StringResource<> data; data = info[0]; if (!data.Prepare(exception_state)) return; ScriptPromise result = impl->writeText(script_state, data); V8SetReturnValue(info, result.V8Value()); }
- idl third_party\blink\renderer\modules\clipboard\clipboard.idl：
[ SecureContext, Exposed=Window ] interface Clipboard : EventTarget { [MeasureAs=AsyncClipboardAPIRead, CallWith=ScriptState, RuntimeEnabled=AsyncClipboard ] Promise<sequence<ClipboardItem>> read(); [MeasureAs=AsyncClipboardAPIReadText, CallWith=ScriptState ] Promise<DOMString> readText(); [MeasureAs=AsyncClipboardAPIWrite, CallWith=ScriptState, RuntimeEnabled=AsyncClipboard ] Promise<void> write(sequence<ClipboardItem> data); [MeasureAs=AsyncClipboardAPIWriteText, CallWith=ScriptState ] Promise<void> writeText(DOMString data); };
2，cpp实现
clipboard.cc clipboard.h
通过v8 bind，调用到。比如writeText（）
3，clipboard_promise.cc 实现了js promise
ScriptPromise ClipboardPromise::CreateForWriteText(ScriptState* script_state, const String& data) { ClipboardPromise* clipboard_promise = MakeGarbageCollected<ClipboardPromise>(script_state); clipboard_promise->GetTaskRunner()->PostTask( FROM_HERE, WTF::Bind(&ClipboardPromise::HandleWriteText, WrapPersistent(clipboard_promise), data)); return clipboard_promise->script_promise_resolver_->Promise(); }
void ClipboardPromise::HandleWriteText(const String& data) { DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_checker_); plain_text_ = data; CheckWritePermission(WTF::Bind( &ClipboardPromise::HandleWriteTextWithPermission, WrapPersistent(this))); }
这里取检查权限：
void ClipboardPromise::CheckWritePermission( PermissionService::HasPermissionCallback callback) { DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_checker_); DCHECK(script_promise_resolver_); if (!IsFocusedDocument(ExecutionContext::From(script_state_))) { script_promise_resolver_->Reject(MakeGarbageCollected<DOMException>( DOMExceptionCode::kNotAllowedError, "Document is not focused.")); return; } if (!GetPermissionService()) { script_promise_resolver_->Reject(MakeGarbageCollected<DOMException>( DOMExceptionCode::kNotAllowedError, "Permission Service could not connect.")); return; }
void ClipboardPromise::HandleWriteTextWithPermission(PermissionStatus status) { DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_checker_); if (status != PermissionStatus::GRANTED) { script_promise_resolver_->Reject(MakeGarbageCollected<DOMException>( DOMExceptionCode::kNotAllowedError, "Write permission denied.")); return; } 这里将同步调用systemClipboard方法： SystemClipboard::GetInstance().WritePlainText(plain_text_); SystemClipboard::GetInstance().CommitWrite();
这里回调js里promise的resolve方法。（失败的话会调 reject方法）。 script_promise_resolver_->Resolve(); }
4，刚才的同步调用对到这里：
third_party\blink\renderer\core\clipboard\system_clipboard.cc
void SystemClipboard::WritePlainText(const String& plain_text, SmartReplaceOption) { // TODO(https://crbug.com/106449): add support for smart replace, which is // currently under-specified. String text = plain_text; #if defined(OS_WIN) ReplaceNewlinesWithWindowsStyleNewlines(text); #endif clipboard_->WriteText(NonNullString(text)); }
其中
clipboard_是个mojo远程调用对象：mojo::Remote<mojom::blink::ClipboardHost> clipboard_;，实现对象接口在ClipboardHost中。
5，这里已经跨进程，运行在browser进程中。Host即表示在browser进程中。
content\browser\renderer_host\clipboard_host_impl.ccvoid ClipboardHostImpl::WriteText(const base::string16& text) { clipboard_writer_->WriteText(text); }
std::unique_ptr<ui::ScopedClipboardWriter> clipboard_writer_;
6，进入ui\base\clipboard\scoped_clipboard_writer.cc
写其实是压栈：
void ScopedClipboardWriter::WriteText(const base::string16& text) { std::string utf8_text = base::UTF16ToUTF8(text); Clipboard::ObjectMapParams parameters; parameters.push_back( Clipboard::ObjectMapParam(utf8_text.begin(), utf8_text.end())); objects_[Clipboard::ObjectType::kText] = parameters; }
然后调commit：
void ClipboardHostImpl::CommitWrite() { clipboard_writer_.reset( new ui::ScopedClipboardWriter(ui::ClipboardBuffer::kCopyPaste)); }
ScopedClipboardWriter::~ScopedClipboardWriter() { if (!objects_.empty()) Clipboard::GetForCurrentThread()->WriteObjects(buffer_, objects_); }
往下进入win移植层：clipboard_win.cc
void ClipboardWin::WriteObjects(ClipboardBuffer buffer, const ObjectMap& objects) { DCHECK_EQ(buffer, ClipboardBuffer::kCopyPaste); ScopedClipboard clipboard; if (!clipboard.Acquire(GetClipboardWindow())) return; ::EmptyClipboard(); for (const auto& object : objects) DispatchObject(object.first, object.second); } void ClipboardWin::WriteText(const char* text_data, size_t text_len) { base::string16 text; base::UTF8ToUTF16(text_data, text_len, &text); HGLOBAL glob = CreateGlobalData(text); WriteToClipboard(CF_UNICODETEXT, glob); }
对于js，promise有 reject，resolve回调，对应cpp中为：
promise被拒：
script_promise_resolver_->Reject(MakeGarbageCollected<DOMException>( DOMExceptionCode::kNotAllowedError, "Document is not focused."));
在clipboard写数据后，添加回调通知：
{ ExecutionContext *context= ExecutionContext::From(script_state_); Document* doc = To<Document>(context); LocalDOMWindow* executing_window = doc->ExecutingWindow(); /* call to js */ Event* ce = Event::CreateBubble(event_type_names::kCopy); //(event_interface_names::kCustomEvent); // ce->SetType("copy"); executing_window->DispatchEvent(*ce, NULL); }
js代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的主页 -</title>
<script type="application/javascript" src="jquery.js"></script>
<style>
.designBtn{
margin-bottom: 20px;
}
.button{
background-color: #00a4ff;
color: #fff;
display: inline-block;
border-color: #008aff;
padding: 6px 3px;
}
.button:hover{
background-color: #0074ff;
}
</style>
</head>
<body>
<div class="designBtn">
<a href="${response.encodeURL(ctx+'/user/logout')}" >设计</a>
<a href="http://www.163.com" class="sheji" onclick="design(event)">设计</a>
</div>
<input type="text" name="info" id="info">
<div class="button" >Copy</div>
<div class="view">
</div>
<script>
function getclipcontent(){
navigator.clipboard.readText().then(
clipText => {
console.log(clipText);
showMsg("Success to write clipboard:"+clipText)
}
);
}
navigator.clipboard.addEventListener('clipboardchange', function (event) {
console.log("clipboardchange un impl");
navigator.clipboard.readText().then(
clipText => {
console.log(clipText);
}
);;
});
navigator.clipboard.addEventListener('copy', function (event) {
console.log("clipboard listener copy");
//self.setTimeout("getclipcontent()",1);//delay
getclipcontent();
;
});
addEventListener('copy', (e) => {
console.log("window listener copy");
//self.setTimeout("getclipcontent()",1);//delay
getclipcontent();
});
document.addEventListener('copy', (e) => {
console.log("document copy listener");
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello World');
});
var clip={
action:0,//0write,1 paste
content:null,//message
}
function handlePermission() {
navigator.permissions.query({name:'clipboard-write'}).then(replyPermission);
navigator.permissions.query({name:'clipboard-read'}).then(replyPermission);
}
function replyPermission(result){
showMsg("permission:"+result.state);
if (result.state == 'granted') {
// report(result.state);
// geoBtn.style.display = 'none';
} else if (result.state == 'prompt') {
// report(result.state);
// navigator.geolocation.getCurrentPosition(revealPosition,positionDenied,geoSettings);
} else if (result.state == 'denied') {
// report(result.state);
// geoBtn.style.display = 'inline';
showMsg("You've prevented from copy or paste！")
}
result.onchange = function() {
showMsg("permission:"+result.state);
}
}
$(".button").bind('click',function(e){
var info=$("#info").val();
navigator.clipboard.writeText(info).then(function() {
navigator.clipboard.readText().then(
clipText => {
/* clipboard successfully set */
showMsg("Success to write clipboard:"+clipText)
}
);
}, function() {
showMsg("Fail to write clipboard!")
/* clipboard write failed */
});
$(".view").append("click!")
})
function showMsg(msg){
$(".view").append(msg+"<br>");
}
handlePermission();
</script>
</body>
</html>
代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body >
<input type="text" id="contents" />
<input type="button" onClick="copy0()" value="复制" />
<input type="button" onClick="setClipboard()" value="复制剪切板" />
<script type="text/javascript">
function copy0(){
var e=document.getElementById("contents");//对象是contents
e.select(); //选择对象
nice=document.execCommand("Copy"); //执行浏览器复制命令
if(nice){
alert('复制内容成功');
}
}
function setClipboard() {
let data = new DataTransfer();
data.items.add("text/plain", "abcd");
navigator.clipboard.write(data).then(function() {
/* success */
console.log("copy success.")
}, function() {
/* failure */
console.log("copy failure.")
});
}
function oncopy1(){
navigator.clipboard.readText().then(
clipText => {
//document.querySelector(".cliptext0").innerText = "aaaaaaaaaaaa";
console.log(clipText);
}
);;
}
addEventListener('copy', function (event) {
navigator.clipboard.readText().then(
clipText => {
console.log(clipText);
}
);;
});
</script>
</body>
</html>
js:
const copy = document.getElementById('copyme');
copy.addEventListener('click', copyToClipboard);
function copyToClipboard() {
// set new clipboard data
function setData(e) {
e.preventDefault();
e.clipboardData.setData('text/plain', 'Hello, world!');
document.removeEventListener('copy', setData);
};
document.addEventListener('copy', setData);
let result;
try {
// execute copy command
document.execCommand('copy');
result = 'Copied';
} catch (err) {
console.log(err);
result = 'Unable to copy';
}
// show whether copy was successfull
document.getElementById('result').innerHTML = result;
setTimeout(() => document.getElementById('result').innerHTML = '', 3000);
};
<a href="https://w3c.github.io/clipboard-apis/#clipboard-event-api"> <h3>Clipboard Event API (synchronous)</h3> </a> <button id="copyme"> Copy Me! </button> <br/> <div id="result"></div> <br/> <hr/><br/> Try to paste 😉 <br/> <textarea rows="4" cols="40"></textarea>
ctl+v触发粘贴事件：
js设置：
document.addEventListener('paste', this.pasteHandler, false)
对于粘贴内容获取：
pasteHandler(event) {
// 阻止默认的粘贴行为
event.preventDefault();
var paste = ""
var type = 0;
var isFile = false;
// 获取剪贴板数据
var clipboardData = event.clipboardData || window.clipboardData;
var types = clipboardData.types;
if (types) {
console.log("all types:", types)
if (types.indexOf('text/html') > -1) {
// HTML content
var htmlContent = clipboardData.getData('text/html');
console.log('HTML content:', htmlContent);
if (htmlContent) {
paste = htmlContent
type = 1;
}
} else {
// Image content
const files = clipboardData.files;
console.log('Image content:', files);
if (files.length > 0) {
isFile = true;
for (let i = 0; i < files.length; i++) {
var reader = new FileReader();
reader.onload = (event) => {
const imageUrl = event.target.result;
console.log(imageUrl); // This is the image as a data URL
this.ws.send(keyboard.pasteText(this.lastId, 3, imageUrl))
};
reader.readAsDataURL(files[i]);
}
} else {
// 如果没有HTML，尝试获取文本
var plainTextContent = clipboardData.getData('text/plain');
console.log('Plain text content pasted:', plainTextContent);
paste = plainTextContent
type = 0;
}
}
if (!isFile && paste.length > 0)
this.ws.send(keyboard.pasteText(this.lastId, type, paste))
else {
if (!isFile && paste.length < 1)
console.log("=== No content to paste! ===")
}
}//types
},触发的事件event回传给客户端js定义在
D:\chromium110\chromium\src\third_party\blink\renderer\core\events\clipboard_event.idl
[
Exposed=Window
] interface ClipboardEvent : Event {
constructor(DOMString type, optional ClipboardEventInit eventInitDict = {});
readonly attribute DataTransfer? clipboardData;
};可以看到clipboardData是个 DataTransfer 类型对象，有个 files 属性。对应的上面js代码的访问。
[
Exposed=Window
] interface DataTransfer {
constructor();
attribute DOMString dropEffect;
attribute DOMString effectAllowed;
[SameObject] readonly attribute DataTransferItemList items;
void setDragImage(Element image, long x, long y);
/* old interface */
[CachedAttribute=hasDataStoreItemListChanged] readonly attribute FrozenArray<DOMString> types;
DOMString getData(DOMString format);
void setData(DOMString format, DOMString data);
void clearData(optional DOMString format);
[SameObject] readonly attribute FileList files;
};ClipboardEvent生成对应的cpp代码：
D:\chromium110\chromium\src\third_party\blink\renderer\core\events\clipboard_event.h
class ClipboardEventInit;
class ClipboardEvent final : public Event {
DEFINE_WRAPPERTYPEINFO();
public:
ClipboardEvent(const AtomicString& type, DataTransfer* clipboard_data);
ClipboardEvent(const AtomicString& type, const ClipboardEventInit*);
~ClipboardEvent() override;
static ClipboardEvent* Create(const AtomicString& type,
DataTransfer* data_transfer) {
return MakeGarbageCollected<ClipboardEvent>(type, data_transfer);
}
static ClipboardEvent* Create(const AtomicString& type,
const ClipboardEventInit* initializer) {
return MakeGarbageCollected<ClipboardEvent>(type, initializer);
}
DataTransfer* clipboardData() const { return clipboard_data_.Get(); }
void Trace(Visitor*) const override;
private:
const AtomicString& InterfaceName() const override;
bool IsClipboardEvent() const override;
Member<DataTransfer> clipboard_data_;
};
