如何从子窗口访问父级中的div答案

【问题标题】：How to access div in parent from child window如何从子窗口访问父级中的div
【发布时间】：2015-07-29 12:19:05
【问题描述】：

我的父窗口中有一个 div，我想在其中显示我已添加到数据库中的新输入记录。

这是在父窗口内：

<div id="divTable"></div>

这个按钮在子窗口里面：

<input type="button" name="submit" value="Submit" onclick="updateTable();"/>

这是在我的外部 javascript 文件中：

function updateTable()
{
 if(insertThis()==true)
 {
  alert("Your details have been entered! Please click on 'View' to display all records.");
 }
 //What should I put here?
}//updateTable(w, h)

在同一个 javascript 文件中，我有另一个函数，它只使用 ajax 显示表格（在另一个按钮的父窗口中）：

function displayTable()
{
 var page = "database.php"
 var parameters = 'action=update';
 var xmlhttp = new XMLHttpRequest();

  if(xmlhttp==null)
  {
   alert("Your browser does not support AJAX!");
   return false;
  } 
  xmlhttp.onreadystatechange=function()
  {      
   document.getElementById("divTable").innerHTML=xmlhttp.responseText;
  };
  xmlhttp.open("GET", page+"?"+parameters, true);
  xmlhttp.send(null); 
}//displayTable()

我有另一个 PHP 文件，但它只是处理向数据库中插入查询。

在子窗口中，我有文本字段和单选按钮等要相应地输入到数据库中。

那么我应该在updateTable() 函数中添加什么？我应该把displayTable() 函数放在那里还是？我试过widnows.opener，但它似乎不起作用。我已经在网上搜索了其他示例，但它们没有处理外部 javascript 文件，所以我有点困惑（或者它与我也不太确定无关）。

我想要的结果是，在用户输入所需的任何内容并单击Submit 按钮后，我希望表格立即显示在父窗口中。目前我正在使用父窗口中的另一个按钮来显示表格。我想这样做是因为如果用户先查看表格然后输入新数据，则在用户退出后，用户必须单击一个按钮才能再次查看表格。（表格显示在div）有什么解决办法吗？

注意：在我的displayTable() 函数中，我有document.getElementById("divTable").innerHTML=xmlhttp.responseText;，所以我不确定是否应该重用这个函数。

附：我更喜欢原始的 javascript 解决方案，因为我是新手并且还在学习，所以我还没有接触过 jQuery 上的任何东西。

【问题讨论】：

你是怎么打开子窗口的？如果使用 window.open，那么它是window.opener.document.getElementById("divTable").innerHTML=whatever - PS 永远不要在表单中使用 name="submit"。它会破坏提交事件
我使用window.open打开窗口。那么关于这个window.opener.document.getElementById("divTable").innerHTML=whatever，如果我想让这个whatever 成为displayTable()，这可能吗？而且我没有使用表格。
是的，这是可能的。 window.opener.displayTable() 会执行函数

标签： javascript ajax

【解决方案1】：

您可以尝试通过再次运行 displayTable(); 函数来重建表：

    function updateTable()
    {
     if(insertThis()==true)
     {
      alert("Your details have been entered! Please click on 'View' to display all records.");
      //Indeed you'd better put it here:
      window.opener.displayTable();
     }
     //What should I put here?

    }//updateTable(w, h)

另一个建议是：在您的父页面更改正文标记如下：

 <body onload="displayTable()">

然后在您的子页面的脚本中重新加载该页面：

function updateTable()
        {
         if(insertThis()==true)
         {
          alert("Your details have been entered! Please click on 'View' to display all records.");
          //Indeed you'd better put it here:
          //window.opener.displayTable();
          window.opener.location.reload();
         }
         //What should I put here?

        }//updateTable(w, h)

【讨论】：

谢谢你，我知道我在某个地方。
等等，它没有，我也把它放在 if 循环之外，但它只是有时显示，而不是一直显示
你的意思是 if 循环是什么意思？你是说外面if(insertThis()==true) { ... }？你应该放在那里'因为你为什么要更新 o 记录被插入？
我的意思是我尝试了你的方法，只有在插入记录时才调用它才有意义。但是它不会立即显示，不知道为什么它是第一次显示。这是随机的。现在我又试了一次，还是不行。我错误地将它放在 if 循环之外，它有时会起作用，但这是错误的逻辑，所以它是错误的。
我建议的第二种方法呢？

【解决方案2】：

您不能在外部 javascript 中访问任何结果文档并具有硬编码引用。在加载 javascript 时，对文档一无所知，只有在文档准备好时才知道。

如果您在加载的 javascript 中有任何内容，那么您需要在文档完全加载后交出生成/完成的对象。

因此，如果有一个函数可以对表执行某些操作，则可以调用它

updateTable(opener.document.getElementById('divTable'));

在函数内部你使用一个变量来引用那个对象。但无论如何这应该在加载文档后工作

window.onload=function(){
    opener.document.getElementById('divTable').style.visibility ="hidden";
    opener.document.getElementById('divTable').innerHTML='Hello, World';
    opener.document.getElementById('divTable').style.visibility ="visible";
}

这是在加载子窗口的最终 html 文档中的

【讨论】：

请重写文本 - 如果您将外部 JS 放在它引用的正文之后，您当然可以引用该文档。纯js也有window.onload=function{}，它将在页面加载后执行。 OP 要求非 jQuery 解决方案