<template>
|
<div>
|
<el-form :inline="true">
|
<zt-form-item>
|
<zt-button style="margin-left: 10px" @click="svgCanvas()">保存</zt-button>
|
</zt-form-item>
|
</el-form>
|
<iframe src="/SVGOrigin/Method-Draw-master/editor/index.html" ref="myIframe" width="100%"
|
style="height:calc(100vh - 125px)">
|
|
</iframe>
|
</div>
|
</template>
|
|
<script>
|
// 监听iframe发送过来的消息
|
window.addEventListener('message', (event) => {
|
if (event.origin === "/SVGOrigin/Method-Draw-master/editor/index.html") { // 确保消息来源可靠
|
console.log('Received message from iframe:', event.data);
|
}
|
})
|
export default {
|
name: "SVGEditor",
|
data(){
|
return {
|
|
}
|
},
|
components:{
|
|
},
|
methods:{
|
handleIframeMessage(event){
|
// 从 iframe 接收到的数据
|
const svgData = event.data;
|
|
// 在这里处理接收到的数据
|
console.log('svgData:', svgData);
|
},
|
svgCanvas(){
|
const iframe = this.$refs.myIframe;
|
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
const iframeWindow = this.$refs.myIframe.contentWindow;
|
// 获取 iframe 中 id 为 tool_save 的按钮元素
|
const saveButton = iframeDocument.getElementById('tool_save');
|
if (saveButton) {
|
// 创建一个新的鼠标抬起事件（mouseup）
|
const mouseUpEvent = new MouseEvent('mouseup', {
|
bubbles: true,
|
cancelable: true,
|
view: window
|
});
|
// 监听鼠标抬起事件
|
saveButton.addEventListener('mouseup', function(event) {
|
console.log('Mouse Up Event Triggered');
|
iframeWindow.postMessage('triggerEvent', '*')
|
setTimeout(()=>{
|
window.addEventListener('message', this.handleIframeMessage)
|
},0)
|
|
});
|
// 触发鼠标抬起事件
|
saveButton.dispatchEvent(mouseUpEvent);
|
} else {
|
console.log('Button not found in iframe');
|
}
|
}
|
},
|
mounted() {
|
window.addEventListener('message', this.handleIframeMessage);
|
},
|
beforeDestroy() {
|
window.removeEventListener('message', this.handleIframeMessage);
|
},
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
