Question

我的父窗口中有一个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;，所以我不确定是否应该重复使用此功能。

P.S。我更喜欢原始的javascript解决方案，因为我是新手，并且还在学习，所以我还没有触及任何关于jQuery的东西。

Answer 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)

Answer 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";
}

这是在＆lt; script＆gt;中加载子窗口的最终html文档中。标签

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

2 个答案: