Can't getElementById (HTMLDOM 对象应该是空的）.我在哪里搞砸了

Can't getElementById (HTMLDOM object is supposedly null). Where am I messing up?

本文关键字：在哪里 getElementById 对象 HTMLDOM Can      更新时间：2023-09-26

所以我被困在这个上面有一段时间了......
我有一个带有div 元素和内联框架 （iframe） 的 HTML 页面：

<!DOCTYPE html>
<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="/GLS_DBSearchProject/resources/css/GLS_DBSearchMainStyle.css"></head>
<div id="DebugOutput">DEBUG-OUTPUT</div>
<body align="center">
    <div class="PWContainer"><iframe class="ProgramWindow" src="index.php"></iframe></div> 
</body>

<?php

div 只是作为一个盒子在那里，当我熟悉 JavaScript 时，我为测试而制作的。iframe包含一个单独的.php页面"index.php"。"index.php"的 HTML 完全由这个 php 代码中的函数生成：

class UserInterface {
var $ParentAppInstance;
function __construct($AppInstance){
    $this->ParentAppInstance = $AppInstance;
    $this->DrawPageHTML();
    $this->DrawDBSetDropdown();
    $this->DrawAdvancedSearchBar();
}
//Override this function to change the HTML and PHP of the UI page.
protected function DrawPageHTML(){
    echo '
    <!----Header-HTML--------------------->
    <div align="center">
      <table width="980" height="207" border="0">
        <tr>
          <td width="411"><img src="resources/logo.png" alt="" width="491" height="145" align="middle" /></td>
          <td width="411"><img src="resources/Logo2.png" width="462" height="171" alt="Logo" /></td>
        </tr>
      </table>
    </div>
    <!------------------------------------>

    <body>
        <script src=/GLS_DBSearchProject/JavaScript/UserInterface.js>
        </script>
    </body>


    ';
    echo '$AppInstanceData: ' . '<br>';
    echo '--CurrentDBSet_Str: ' . $this->ParentAppInstance->CurrentDBSet_Str;
}
protected function DrawDBSetDropdown(){
    echo '<div align="right">';
        echo '<select onchange="SwitchDatabaseSet(this.ownerDocument)" name="DBSetList" form="DBSetSelector">';
        $i = 0;
        foreach ($this->ParentAppInstance->DBSets_Arr as $DBSet){
            if($DBSet->DBSetName == 'DBSet0'){/* DO NOTHING. IE. IGNORE IT*/}
            else{
                $i++;
                echo '<option value="' . $DBSet->DBSetName . '">' . $DBSet->DBSetName . '</option>';
            }
        }
        echo '</select>';
    echo '</div>';
}

在 UserInterface 类的 DrawDBSetDropdown（） 函数中，我绘制了一个带有变量选项的选择框。每当用户更改此选择器的状态时，我都会使用 HTML DOM 对象 "index.php" 调用 SwitchDatabaseSet（） javascript 函数。

到目前为止，一切似乎都很好。事情变得奇怪的地方是：

function JSTEST(){
window.alert("JS Called Successfully!!");
}
function SwitchDatabaseSet(MainPageDoc){
    window.alert(null === MainPageDoc);//1. 
    window.alert(MainPageDoc.domain);//2. 
    MainPageDoc.getElementById("DebugOutput").innerHTML = "Test";//3.
 }
  1. 结果：假。MainPageDoc 不为空。
  2. 结果：本地主机。正如预期的那样，该页面在本地主机上运行。值得注意的是，MainPageDoc ！= null。
  3. 突然间，MainPageDoc应该等于null;因为我得到以下错误：

未捕获的类型错误：无法设置空的属性"innerHTML"

*document.getElementById（） 产生相同的结果。

我正在尝试更改调试输出<div>的文本，但由于上述问题，它不起作用。
在1.和 2.两者都表明 MainPageDoc 不为空，那么为什么我在 3 处收到错误。?我在这里做错了什么？

我认为

这实际上是不可能的，我可能是错的，但原因如下：这是可能的，请参阅第二次编辑。

index.php生成一个HTML网页（我们称之为"index_html"）

实现用户界面.js <script src="UserInterface.js"></script>标记在"index_html"中实现。

因此：document.getElementById（"DebugOutput"）和 MainPageDoc.getElementByID（"DebugOutput"）实际上是相同的，它们返回 null，因为它们都在寻找 id="DebugOutput" 的元素。

此<div>是在我提供的第一段 HTML 代码中实现的<称之为"true_index.html>，而不是index_html。因此，这两个语句都返回 null，如此处所述。

编辑

：我认为不可能从包含在iframe中的JavaScript编辑父HTML文档中的HTML元素。我会在深入研究之后报告。

编辑：这几乎总结了这个问题，一旦我知道我在寻找什么，就很容易找到。

相关文章：