如何实现将百度的图片拖拽至自己写的html页面呢?

1.先写一个简单的html页面，如下

html

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <div style="width: 100%; height: 100vh;">
                1111111111111111
            </div>
        </body>
    </html>

2.再写一个html页面，将百度和上面的页面通过iframe嵌入网页

html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<style>	
	.left{
		width: 50%;
		height: 100vh;
	}
	.right{
		width: 50%;
		height: 100vh;
		float: right;
	}
</style>
<body>
	<div style="display: flex;height: 100vh;">
		<iframe src="./inner.html" frameborder="0" width="100%" height="100%" id="target-iframe"></iframe>
		<iframe src="https://image.baidu.com/" frameborder="0" width="100%" height="100%" id="source-iframe"></iframe>
	</div>
	<script>
		
			const SourceIframe = document.querySelector('#source-iframe');
		
			SourceIframe.onload=function() {
				console.log("iframe加载完成")
				iframe.contentDocument || iframe.contentWindow.document;
			}

	</script>
</body>
</html>

效果如下

接下来问题就来了，如何监听iframe的拖拽事件?

1.首先要先拿到iframe中的document

const targetIframe = document.getElementById("target-iframe")
    const sourceIframe = document.getElementById("source-iframe")

    targetIframe.onload= function() {
        console.log("iframe加载完成")
        console.log("111111111",targetIframe.contentWindow.document)
    }
    sourceIframe.onload=function() {
        console.log("iframe加载完成")
        console.log("111111111",sourceIframe.contentWindow.document)
    }

上述代码发生了一个错误，如图所示: 这个错误的意思是跨域了，所以，如何解决跨域问题呢？

第一种方式使用postMessage方法

postMessage是HTML5提供的一种跨窗口通信的方法，可以在不同源的页面之间安全地传递数据。在父页面和IFRAME页面中分别使用postMessage方法，可以实现跨域通信。在iframe中写入如下代码

 <script>
        window.addEventListener("click",function() {
            var message = {name: "百度", url: "https://www.baidu.com"}
            window.parent.postMessage(message,"*")
        })
</script>

在父页面中添加下列代码

<script>
    window.addEventListener("click",function() {
        var message = {name: "百度", url: "https://www.baidu.com"}
        window.parent.postMessage(message,"*")
    })
    </script>

当iframe发生点击行为时，会给父页面发送消息，父页面接收，如下图

如何实现将百度的图片拖拽至自己写的html页面呢? ​

1.先写一个简单的html页面，如下 ​

2.再写一个html页面，将百度和上面的页面通过iframe嵌入网页 ​

效果如下 ​

接下来问题就来了，如何监听iframe的拖拽事件? ​

第一种方式 使用postMessage方法 ​