CARVIEW |
Select Language
HTTP/2 200
content-type: text/html
x-guploader-uploadid: AAwnv3L7WOOcdXM35ByXo3Lxb4aPBhbXirRVG27c-OsnkJ9rY95WqZNQaZ8xaHL_SF4WCPauFnO8D6w
cache-control: public, max-age=3600
expires: Wed, 08 Oct 2025 21:16:26 GMT
last-modified: Wed, 08 Oct 2025 01:12:21 GMT
etag: W/"aa8b8e3216a37b9608a54ae92e5dab03"
x-goog-generation: 1759885941598281
x-goog-metageneration: 1
x-goog-stored-content-encoding: identity
x-goog-stored-content-length: 154923
x-goog-meta-goog-reserved-file-mtime: 1759884096
x-goog-hash: crc32c=7hvVyw==, md5=qouOMhaje5YIpUrpLl2rAw==
x-goog-storage-class: STANDARD
accept-ranges: none
alt-svc: h3=":443"; ma=2592000,h3-29=":443"; ma=2592000
alt-svc: clear
referrer-policy: strict-origin-when-cross-origin
x-content-type-options: nosniff
strict-transport-security: max-age=63072000
content-security-policy: default-src 'self'; script-src 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; script-src-elem 'report-sample' 'self' 'wasm-unsafe-eval' https://www.google-analytics.com/analytics.js https://www.googletagmanager.com/gtag/js assets.codepen.io production-assets.codepen.io https://js.stripe.com 'sha256-XNBp89FG76amD8BqrJzyflxOF9PaWPqPqvJfKZPCv7M=' 'sha256-YCNoU9DNiinACbd8n6UPyB/8vj0kXvhkOni9/06SuYw=' 'sha256-PZjP7OR6mBEtnvXIZfCZ5PuOlxoDF1LDZL8aj8c42rw='; style-src 'report-sample' 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'; connect-src 'self' developer.allizom.org bcd.developer.allizom.org bcd.developer.mozilla.org updates.developer.allizom.org updates.developer.mozilla.org https://*.google-analytics.com https://*.analytics.google.com https://*.googletagmanager.com https://incoming.telemetry.mozilla.org https://observatory-api.mdn.allizom.net https://observatory-api.mdn.mozilla.net https://api.github.com/search/issues stats.g.doubleclick.net https://api.stripe.com; font-src 'self'; frame-src 'self' interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net mdn.github.io live-samples.mdn.mozilla.net live-samples.mdn.allizom.net *.mdnplay.dev *.mdnyalp.dev *.play.test.mdn.allizom.net https://v2.scrimba.com https://scrimba.com jsfiddle.net www.youtube-nocookie.com codepen.io survey.alchemer.com https://js.stripe.com; img-src 'self' data: *.githubusercontent.com *.googleusercontent.com *.gravatar.com mozillausercontent.com firefoxusercontent.com profile.stage.mozaws.net profile.accounts.firefox.com developer.mozilla.org mdn.dev interactive-examples.mdn.mozilla.net interactive-examples.mdn.allizom.net wikipedia.org upload.wikimedia.org https://mdn.github.io/shared-assets/ https://mdn.dev/ https://*.google-analytics.com https://*.googletagmanager.com www.gstatic.com; manifest-src 'self'; media-src 'self' archive.org videos.cdn.mozilla.net https://mdn.github.io/shared-assets/; child-src 'self'; worker-src 'self';
x-frame-options: DENY
origin-trial: AxVILwizhbMjxFeHOn1P3R8niO1RJY/smaK4B4d1rLzc1gTaxtXMSaTi+FoigYgCw40uFRDwFcEAeqDR+vVLOW4AAABfeyJvcmlnaW4iOiJodHRwczovL2RldmVsb3Blci5tb3ppbGxhLm9yZyIsImZlYXR1cmUiOiJQcml2YXRlQXR0cmlidXRpb25WMiIsImV4cGlyeSI6MTc0MjA3OTYwMH0=
x-cloud-trace-context: f8345e75739d4a78ff891032d8a2c319
date: Wed, 08 Oct 2025 20:16:26 GMT
server: Google Frontend
via: 1.1 google
vary: Accept-Encoding
content-encoding: gzip
x-cache: miss
DataTransferItem.getAsString() - Web API | MDN
Toggle sidebar
>
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
DataTransferItem.getAsString()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年11月.
DataTransferItem.getAsString()
メソッドは、項目の kind
が プレーン Unicode 文字列 (すなわち kind
が string
)である場合に、ドラッグデータ項目の文字列データを引数に指定してコールバックを呼び出すメソッドです。
構文
js
// アロー関数
getAsString((data) => { /* … */ } )
// コールバック関数
getAsString(callbackFn)
// インラインコールバック関数
getAsString(function(data) { /* … */ })
引数
callbackFn
-
以下の引数を受け取るコールバック関数です。
data
-
データ転送アイテムの文字列データです。
返値
なし (undefined
)。
例
この例では、 drop
イベントハンドラーにおいて、 getAsString()
メソッドを インライン関数 として使用しているところを示しています。
js
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
const data = ev.dataTransfer.items;
for (let i = 0; i < data.length; i += 1) {
if (data[i].kind === "string" && data[i].type.match("^text/plain")) {
// This item is the target node
data[i].getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (data[i].kind === "string" && data[i].type.match("^text/html")) {
// Drag data item is HTML
console.log("… Drop: HTML");
} else if (
data[i].kind === "string" &&
data[i].type.match("^text/uri-list")
) {
// Drag data item is URI
console.log("… Drop: URI");
} else if (data[i].kind === "file" && data[i].type.match("^image/")) {
// Drag data item is an image file
const f = data[i].getAsFile();
console.log("… Drop: File ");
}
}
}
仕様書
Specification |
---|
HTML> # dom-datatransferitem-getasstring-dev> |
ブラウザーの互換性
Loading…