window.open()打开一个子窗口,怎么实现在子窗口选择数据，然后提交把数据加到父窗口。

Posted 2023-05-07

比如在子页面选择用户时，系统会自动把相关的信息传到父页面的相应控件上，同时关闭子页面.在两个JSP页面间进行

参考技术A 有一个window.returnValue,在父窗口
var x = window.showModalDialog(url,参数,其他参数);
然后在这个打开的子页面设置某些值后，利用js返回
window.returnValue = xxx;
this.close();
这样父窗口x的值就是xxx的值了

无法调用子窗口函数

我有这个Vue页面，它使用以下行打开一个子窗口;

this.presentation = window.open(
    this.$router.resolve({name:'presentation'}).href,
    'child window',
    'width=auto,height=auto'
);

这就像一个魅力，但现在我需要称它为方法。我试图像这样访问它们。 家长：

this.presentation.setPage(0);

儿童：

export default {
  name: 'Presentation',
  data() {
    return {
      page: null
    }
  },
  methods: {
    setPage(_page) {
      this.page = _page;
    }
  }

这会引发跟随错误。

TypeError: "this.presentation.setPage is not a function"

为什么我不能调用子方法？我怎样才能解决这个问题？

答案

首先，来自window.open() documentation：

窗口

...名称不应包含空格。 ...

返回值：

表示新创建的窗口的Window对象。

你的this.presentation包含Window对象，而不是Vue对象。当然，它没有setPage()方法。

也许，类似的东西可以工作（在你的孩子组件中）：

{
  mounted() {
    window.setPage = (page) => this.setPage(page);
  }
}