从另一个窗口传递函数纯JavaScript

时间:2018-01-31 17:58:08

标签: javascript function inheritance parent

我要求将一些JavaScript函数发送回父窗口并且有困难。我创建了一个示例来迭代我尝试做的事情。但基本上我需要通过从单独的窗口执行一个函数来显示和隐藏父窗口上的DIV。

第一个代码段是Page1.html,

function newWin() {
  window.open("page2.html", "New_Win");
}

function toggle_vis(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}
#container {
  background-color: red;
  margin: auto;
  display: block;
  position: absolute;
  width: 800px;
  height: 600px;
  padding: 10px;
  z-index: 1;
}

#frame {
  background-color: black;
  display: block;
  position: absolute;
  width: 400px;
  height: 300px;
  padding: 0px;
  z-index: 2;
}

#inner {
  background-color: green;
  display: none;
  position: absolute;
  width: 200px;
  height: 150px;
  z-index: 3;
}
<div id="container">
  <div id="frame"><button onclick="newWin()">Open New Window</button>
    <div id="inner"></div>
  </div>
</div>

这是Page2.html的代码。

function test(){
   parent.document.innerHTML.toggle_vis('inner');
}
#container {
    background-color: blue;
    margin: auto;
    display: block;
    position: absolute;
    width: 400px;
    height: 200px;
    padding: 10px;
    z-index: 1;
}
<div id="container">
<button onclick="test()">Show/Hide Parent Div</button>
</div>

1 个答案:

答案 0 :(得分:0)

您可以使用window.opener对象引用开启窗口,因此:

function test(){
   window.opener.toggle_vis('inner');
}