Vue中，iframe中的子网页，调用父网页的方法

2021-09-13 15:33:23 阅读：228 来源： 互联网

标签：Vue 网页 log window 调用 iframe myconsole console 页面

　　首先需要明确的一点，标题所说的子页面调用父页面的方法或者函数，是需要父子页面配合的。如果子页面不是你自己开发的，或者父页面不是自己开发的，那就没办法调用了。而且，因为业务的特殊需要，我们用到了iframe，如果只是Vue两个父子组件的传值或者调用，其实是非常简单的，百度一下，就能出现很多。这里就不一一赘述了。

　　在明确了以上的点以后，开始这一次的分享。首先先说一下，没有在Vue框架中，就是单纯的HTML页面，子页面调用父页面的函数，其实非常的简单。在子页面中，有一个windows.parent的方法。我们打印来看一下这个方法中有什么东西；

这还是一个windos的对象，而且里面居然有了我在父页面中定义的方法，大家可以看下，父页面的代码。

父页面的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <p>这里是父元素</p>
10     <iframe src="./child.html" frameborder="0"></iframe>
11 </body>
12 <script>
13     function myconsole(a){
14         console.log(a);
15         console.log("这里是父元素的方法")
16     }
17 </script>
18 </html>

其实这样的话就已经很简单了，子页面要是想要调用父页面的方法，只需要在windos.parent中调用父组件定义好的方法就行了。下面是子页面的代码。

子页面的代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <h1>这里是子元素</h1>
10     <button id="btn">按钮</button>
11 </body>
12 <script>
13     var btn = document.getElementById("btn")
14     btn.onclick = function(){
15         console.log('子元素点击了')
16         window.parent.myconsole("哈哈哈，这是传参");
17         console.log(window);
18         console.log(window.parent);
19     }
20 </script>
21 </html>

同时，我们可以看到，这个是可以传参的。如果需要传参的话，直接在这里传参就好了。

　　上面说完了普通的传值，其实Vue中的就很简单了。但是Vue中需要注意的一个点就是，在父页面中的methods定义了方法，需要在mounted的时候，把这个方法暴露给window的全局对象；

父页面代码Vue：

 1 export default {
 2   name: "parent",
 3   data() {
 4     return {};
 5   },
 6   props: {},
 7   mounted() {
 8     window.myconsole = this.myconsole;// 这里需要暴露给全局，这样的话，子页面才能调用相对应的方法
 9   },
10   components: {},
11   computed: {},
12   methods: {
13     myconsole(){
14         console.log("这里是调用父元素中的方法");
15     },
16   }
17 };

子页面想要调用其实也是很简单的，请看下面的代码：

子页面的Vue代码：

 1 <template>
 2     <div id="child">
 3         <button @click="clo">按钮</button>
 4     </div>
 5 </template>
 6 <script>
 7 export default {
 8   name: "child",
 9   data() {
10     return {};
11   },
12   props: {},
13   mounted() {
14     window.myconsole = this.myconsole;
15   },
16   components: {},
17   computed: {},
18   methods: {
19     clo(){
20         console.log('点击了子页面的按钮')
21         window.parent.myconsole();
22     },
23   }
24 };
25 </script>

　　这样的话，就实现了，上面所说的，子页面调用父页面的方法。同时也是实现了，父子页面的传值。不过需要说明的一点就是，这个没办法直接调试，因为必须打包完成之后才能在iframe中引入。所以大家在做这一方面的时候，多加打印日志。等到调试完成之后，在删除打印的东西。

标签：Vue,网页,log,window,调用,iframe,myconsole,console,页面
来源： https://www.cnblogs.com/daniao11417/p/15262583.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue中，iframe中的子网页，调用父网页的方法