3

将元素从iframe中拖拽到上层网页的任意位置。

 1 year ago
source link: https://blog.p2hp.com/archives/9852
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

将元素从iframe中拖拽到上层网页的任意位置。 | Lenix Blog

iframe代码： json

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<div draggable='true' id="hahaha" class="box">
ddddd
</div>
<div draggable='true' id="hahaha2" class="box">
ddddd
</div>
<script>
/** Iframe code **/
//say you have this div inside your iframe that looks like this:
let elementInsideIframe = document.getElementsByClassName("box");
var arr =Array.from(elementInsideIframe);
arr.forEach(element => {
// console.log(element.id);
element.addEventListener("dragstart", event => {
//send message to parent somehow.
//usually this can be done with https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
window.parent.postMessage({'key1': element.id,'key2': 'value2'}, "*");
//The last arg can be a Transferable Object, but I haven't used this before.
//https://developer.mozilla.org/en-US/docs/Web/API/Transferable
//Also handle the 'dragend' event:
element.addEventListener("dragend", event => {
//send message to parent again.
const data = {
mouse:{
x: event.pageX,
y: event.pageY,
textPayload: 'hey man!' +element.id,
window.parent.postMessage(JSON.stringify(data), "*");
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>

<body>

    <div draggable='true' id="hahaha" class="box">

ddddd 
    </div>


    <div draggable='true' id="hahaha2" class="box">

      ddddd 
          </div>
<script>

    /** Iframe code **/
//say you have this div inside your iframe that looks like this:
let elementInsideIframe =  document.getElementsByClassName("box");

var arr =Array.from(elementInsideIframe);

arr.forEach(element => {
  // console.log(element.id);
  element.addEventListener("dragstart", event => {
  //send message to parent somehow.
  //usually this can be done with https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
  window.parent.postMessage({'key1': element.id,'key2': 'value2'}, "*");
  //The last arg can be a Transferable Object, but I haven't used this before.
  //https://developer.mozilla.org/en-US/docs/Web/API/Transferable
});
//Also handle the 'dragend' event:
element.addEventListener("dragend", event => {
  //send message to parent again.
  const data = {
      mouse:{
        x: event.pageX,
        y: event.pageY,
      },
     textPayload: 'hey man!' +element.id,
  }
  window.parent.postMessage(JSON.stringify(data), "*");
});
});
 


</script>

</body>
</html>

主页面代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<iframe src="d1.html"></iframe>
<script>
function receiveMessage(event)
console.log('receiveMessage', event);
//maybe check the origin here before you look at the messages
//and confirm you trust the sender.
//Handle string messages
switch(event.data) {
case 'dragging!':
//set up a div overlay
const overlay = document.createElement("div");
overlay.className = "overlay";
overlay.innerHTML =
'<div class="text"> Drag and drop somewhere! </div>';
const domInsertionPoint = document.getElementsByClassName(
"wherever-you-want-to-insert-the-overlay"
)[0];
domInsertionPoint.appendChild(overlay);
//maybe handle some other string messages here:
default:
return;
//handle the data type messages
const data = JSON.parse(event.data);
if (typeof data == 'object' && data.hasOwnProperty('mouse')) {
document.getElementsByClassName("overlay")[0].remove();
const syntheticEvent = new DragEvent("drop");
// Override dataTransfer first so we can define our own.
Object.defineProperty(syntheticEvent, "dataTransfer", {
value: {}
// Once dataTransfer is overridden, you can define getData.
syntheticEvent.dataTransfer.getData = dragFormatRequested => {
// only handling text atm.
if (["text", "text/html"].indexOf(dragFormatRequested) > -1) {
return data.textPayload;
const target = document.elementFromPoint(data.mouse.x, data.mouse.y)
Object.defineProperty(syntheticEvent, "target", {
value: target
target.dispatchEvent(syntheticEvent);
} catch(error) {
//error was probably SyntaxError for trying to parse something
//that isn't JSON.
//listen for the message from the child.
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML文档</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>

<body>
<iframe src="d1.html"></iframe>
<script>

function receiveMessage(event)
{
    console.log('receiveMessage', event);
    //maybe check the origin here before you look at the messages
    //and confirm you trust the sender.

    //Handle string messages
    switch(event.data) {
        case 'dragging!':
            //set up a div overlay
            const overlay = document.createElement("div");
            overlay.className = "overlay";
            overlay.innerHTML =
                '<div class="text"> Drag and drop somewhere! </div>';
            const domInsertionPoint = document.getElementsByClassName(
                "wherever-you-want-to-insert-the-overlay"
            )[0];
            domInsertionPoint.appendChild(overlay);
        //maybe handle some other string messages here:
        default:
            return;
    }
    //handle the data type messages
    try {
        const data = JSON.parse(event.data);
        if (typeof data == 'object' && data.hasOwnProperty('mouse')) {
            document.getElementsByClassName("overlay")[0].remove();
            const syntheticEvent = new DragEvent("drop");
            // Override dataTransfer first so we can define our own.
            Object.defineProperty(syntheticEvent, "dataTransfer", {
                value: {}
            });
            // Once dataTransfer is overridden, you can define getData.
            syntheticEvent.dataTransfer.getData = dragFormatRequested => {
                // only handling text atm.
                if (["text", "text/html"].indexOf(dragFormatRequested) > -1) {
                    return data.textPayload;
                }
            };
            const target = document.elementFromPoint(data.mouse.x, data.mouse.y)
            Object.defineProperty(syntheticEvent, "target", {
                value: target
            });
            target.dispatchEvent(syntheticEvent);
        }
    } catch(error) {
        //error was probably SyntaxError for trying to parse something
        //that isn't JSON.
    }
}
//listen for the message from the child.
window.addEventListener("message", receiveMessage, false);
</script>
</body>
</html>

拖动过程中，按F12,打开console查看信息。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK