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

Question

I have a div in my parent window where I would like to display new entered records that I have added into the database. 我的父窗口中有一个div，我想在其中显示已添加到数据库中的新输入记录。

This is inside the parent window: 这是在父窗口内：

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

This button is inside the child window: 此按钮在子窗口内：

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

And this is inside my external javascript file: 这是在我的外部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)

In the same javascript file I have another function that just displays the table(in the parent window for another button) using ajax: 在同一个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()

I have another PHP file but that just handles the inserting of queries into the database. 我还有另一个PHP文件，但它只处理将查询插入数据库中的问题。

In the child window I have text fields and radio buttons etc to be entered accordingly to the database. 在子窗口中，我有文本字段和单选按钮等，可根据需要输入数据库。

So what should I put in the updateTable() function? 那么我应该在updateTable()函数中放什么呢？ Should I put the displayTable() function there or? 我应该把displayTable()函数放在那里吗？ I've tried widnows.opener and it doesn't seem to work. 我试过了widnows.opener ，它似乎不起作用。 I've researched online for other examples but they're not dealing with external javascript files so I'm a little confused(or it has nothing to do with that I'm not too sure either). 我在网上研究了其他示例，但它们没有处理外部javascript文件，因此我有点困惑（或者与我不太确定也没有关系）。

My desired outcome is that after the user has entered whatever that is required and clicks the Submit button, I want the table to be displayed at the parent window immediately. 我希望得到的结果是，在用户输入了所需的内容并单击“ Submit按钮之后，我希望表立即显示在父窗口中。 Currently I am using another button in the parent window to display the table. 目前，我正在使用父窗口中的另一个按钮来显示表格。 I want to do this because if the user views the table first and then enters new data, after the user exits the user has to click on a button to view the table again. 我要这样做是因为，如果用户先查看表然后输入新数据，则在用户退出后，用户必须单击按钮才能再次查看表。 (table to be displayed at div )Any solutions? （表格将显示在div ）任何解决方案？

Note: In my displayTable() function I have document.getElementById("divTable").innerHTML=xmlhttp.responseText; 注意：在我的displayTable()函数中，我有document.getElementById("divTable").innerHTML=xmlhttp.responseText; so I'm not sure if I should reuse this function. 所以我不确定是否应该重用此功能。

PS I prefer raw javascript solutions as I'm new to it and still learning so I have yet to touch anything on jQuery. PS我喜欢原始的javascript解决方案，因为它是我的新手，并且仍在学习中，因此我还没有涉及jQuery。

Answer 1

you can try to reconstruct the table by running that displayTable(); 您可以尝试通过运行displayTable();来重建表displayTable(); function again: 再次起作用：

    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)

Another recommendation would be: at your parent page change the body tag as follows: 另一个建议是：在父页面上，如下更改body标签：

 <body onload="displayTable()">

And in your child page's script reload that page: 然后在子页面的脚本中重新加载该页面：

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

You can't have anything in the external javascript that accesses anything of the resulting document and has hardcoded references. 您不能在外部javascript中访问任何结果文档并具有硬编码引用的内容。 At the time the javascript is loaded there isn't anything known about document, it is only known when the document it ready. 在加载javascript时，对文档一无所知，只有在文档准备就绪时才知道。

If you have anything in the loaded javascript then you need to hand over the resulting/finished object once the document is fully loaded. 如果已加载的javascript中有任何内容，则在文档完全加载后，您需要移交结果/完成的对象。

So if there is a function that does something to the table you would call it 因此，如果有一个对表有作用的函数，您将其称为

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

The inside the function you use a variable to reference THAT object. 在函数内部，您使用变量来引用THAT对象。 But anyway this should work after the document is loaded 但是无论如何，这应该在文档加载后起作用

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

This is in the final html document of the loading child window in a <script> tag. 这在<script>标记的加载子窗口的最终html文档中。

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-05-18 05:36:28

解决方案2
0 2015-05-18 05:48:57

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-05-18 05:36:28

解决方案2 0 2015-05-18 05:48:57

解决方案1
2 已采纳 2015-05-18 05:36:28

解决方案2
0 2015-05-18 05:48:57