{"id":33,"date":"2022-04-02T17:56:33","date_gmt":"2022-04-02T09:56:33","guid":{"rendered":"https:\/\/www.icfyless.com\/?p=33"},"modified":"2022-04-19T09:42:17","modified_gmt":"2022-04-19T01:42:17","slug":"vue%e9%a1%b5%e9%9d%a2%e4%b8%8eiframe%e8%bf%9b%e8%a1%8c%e5%8f%8c%e5%90%91%e9%80%9a%e4%bf%a1%e7%9a%84%e5%ae%8c%e6%95%b4%e6%b5%81%e7%a8%8b","status":"publish","type":"post","link":"https:\/\/www.icfyless.com\/index.php\/2022\/04\/02\/vue%e9%a1%b5%e9%9d%a2%e4%b8%8eiframe%e8%bf%9b%e8%a1%8c%e5%8f%8c%e5%90%91%e9%80%9a%e4%bf%a1%e7%9a%84%e5%ae%8c%e6%95%b4%e6%b5%81%e7%a8%8b\/","title":{"rendered":"Vue\u9875\u9762\u4e0eiframe\u8fdb\u884c\u53cc\u5411\u901a\u4fe1\u7684\u5b8c\u6574\u6d41\u7a0b"},"content":{"rendered":"\n

Vue \u5e94\u7528\u4e2d\uff0c\u9700\u8981\u5d4c\u5957iframe \u9875\u9762\uff0c\u8be5\u9875\u9762\u6765\u6e90\u4e8e\u5176\u4ed6\u9879\u76ee\uff0c\u8fd9\u5c31\u8981\u89e3\u51b3 Vue \u7236\u9875\u9762\u548c iframe \u5b50\u9875\u9762\u7684\u4e24\u4e2a\u901a\u4fe1\u95ee\u9898\uff1aVue\u4e0e iframe \u9875\u9762\u53c2\u6570\u4e92\u901a<\/p>\n\n\n\n

\u5177\u4f53\u4ee3\u7801\u5982\u4e0b\uff0c\u7236\u9875\u9762\u901a\u8fc7\u6309\u94ae\u5411\u5b50\u9875\u9762\u4f20\u53c2\uff0c\u5e76\u76d1\u542c\u5b50\u9875\u9762\u7684\u4f20\u53c2<\/strong><\/p>\n\n\n\n

<template>\n    <div>\n        <iframe ref=\"fIframe\" class=\"iframeClass\" src=\"https:\/\/10.0.18.16:8081\/\" frameborder=\"0\"><\/iframe>\n        <div class=\"btn\" @click=\"fClick\">\u7236\u9875\u9762\u4f20\u53c2<\/div>\n    <\/div>\n<\/template>\n\n<script>\n    export default {\n        mounted() {\n            \/\/ \u76d1\u542c\u5b50\u9875\u9762\u60f3\u7236\u9875\u9762\u7684\u4f20\u53c2\n            window.addEventListener('message',function(event){\n                \/\/\u6b64\u5904\u6267\u884c\u4e8b\u4ef6\n                console.log('\u76d1\u542c\u5230\u5b50\u9875\u9762\u7684\u4f20\u53c2')\n                console.log(event.data)\n            })\n        },\n        methods: {\n            \/\/ \u7236\u9875\u9762\u5904\u53d1\u5411\u5b50\u9875\u9762\u4f20\u53c2\n            fClick(){\n                let data = {\n                    type:2,\n                    code:200,\n                    data:'\u7236\u9875\u9762\u9762\u4f20\u8f93\u6570\u636e\u8fc7\u6765\u4e86'\n                }\n                this.$refs.fIframe.contentWindow.postMessage(data,'*')\n            },\n        }\n    }\n<\/script>\n\n<style >\n\n    .btn{\n        width: 100px;\n        height:50px;\n        text-align: center;\n        line-height:50px;\n        border: 1px solid #ccc;\n        border-radius: 12px;\n        position:fixed;top:0;left:0;\n    }\n    .iframeClass{\n        width:100%;height:100vh;\n    }\n<\/style><\/code><\/pre>\n\n\n\n
\u5b50\u9875\u9762\u5411\u7236\u9875\u9762\u4f20\u53c2\u5e76\u76d1\u542c\u7236\u9875\u9762\u4f20\u53c2<\/strong><\/p>\n\n\n\n
<template>\n    <div>\n        <div class=\"btn1\" @click=\"sonClick\">\u5b50\u9875\u9762\u5904\u53d1<\/div>\n    <\/div>\n<\/template>\n\n<script>\n    export default {\n        mounted() {\n            \/\/ \u76d1\u542c\u7236\u9875\u9762\u5411\u5b50\u9875\u9762\u7684\u4f20\u53c2\n            window.addEventListener('message', (e) => {\n                console.log('\u7236\u9875\u9762\u4f20\u8f93\u8fc7\u6765\u53c2\u6570')\n                console.log(e.data)\n            });\n        },\n        methods: {\n            \/\/ \u5b50\u9875\u9762\u5904\u53d1\u5411\u7236\u9875\u9762\u4f20\u53c2\n            sonClick(){\n                let data = {\n                    type:1,\n                    code:200,\n                    data:'\u5b50\u9875\u9762\u4f20\u8f93\u6570\u636e\u8fc7\u6765\u4e86'\n                }\n                window.parent.postMessage(data,'*');\n            },\n\n        }\n    }\n<\/script>\n<style >\n    .btn1{\n        width: 100px;\n        height:50px;\n        text-align: center;\n        line-height:50px;\n        border: 1px solid #ccc;\n        border-radius: 12px;\n        position:fixed;top:0;right:0;\n        z-index:999999;\n    }\n    .iframeClass{\n        width:100%;height:100vh;border:1px solid red;\n    }\n<\/style><\/code><\/pre>\n\n\n\n
\u6ce8\uff1a
\u9875\u9762\u4f20\u53c2\u9700\u8981\u5728iframe\u52a0\u8f7d\u5b8c\u6210\u540e\u518d\u53bb\u5904\u53d1\u554a\uff0c\u5982\u679c\u9700\u8981\u5728\u521d\u59cb\u5316\u65f6\u5904\u53d1\u53ef\u4ee5\u8003\u8651\u7528load\u65b9\u6cd5
\u5728\u5177\u4f53\u9879\u76ee\u4e2d\u5982\u679c\u6211\u4eec\u6709\u591a\u5904\u9700\u8981\u901a\u8fc7iframe\u6765\u901a\u4fe1\uff0c\u6211\u4eec\u53ef\u4ee5\u4f20\u4e00\u4e2atype\u7c7b\u578b\uff0c\u6839\u636etype\u7c7b\u578b\u53bb\u533a\u5206\u4e1a\u52a1\u573a\u666f\u8fdb\u884c\u4f20\u53c2\u5904\u7406<\/p>\n","protected":false},"excerpt":{"rendered":"
Vue \u5e94\u7528\u4e2d\uff0c\u9700\u8981\u5d4c\u5957iframe \u9875\u9762\uff0c\u8be5\u9875\u9762 …<\/p>\n","protected":false},"author":1,"featured_media":36,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,6],"tags":[],"class_list":["post-33","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vue","category-codeing"],"_links":{"self":[{"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/posts\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":3,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/posts\/33\/revisions\/44"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/media\/36"}],"wp:attachment":[{"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/media?parent=33"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/categories?post=33"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.icfyless.com\/index.php\/wp-json\/wp\/v2\/tags?post=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}