Question

我写了一个前一个问题......这个问题相当混乱......所以我尽可能简单地让每个人都能理解。

＆＃xA;＆＃xA;

我正在使用 PHP内置Web服务器来测试我的PHP代码。我不知道这是否有任何缺点，但这就是我现在正在使用的（建议对此有帮助，因为我显然不知道我在做什么，但我不认为它与问题有关）

＆＃xA;＆＃xA;

我正在尝试运行以下代码，特别是 leggo（）。 page2.php 中的任何脚本都不起作用， onloads肯定无法正常工作（原因很明显）。这些脚本不起作用很奇怪，但是当所有脚本都移到 header.php 中时，它们开始工作...... 除了onload的。是否有替代使用onload 。我猜测结合使用AJAX和onload存在问题。 ---编辑---代码已经过简化，以便更好地理解和建议。

＆＃xA;＆＃xA;

代码

＆＃xA;＆ #xA;

heading.php

＆＃xA;＆＃xA;

 ＆lt;！DOCTYPE html＆gt;＆＃xA;＆lt; html＆gt;＆＃ XA; ＆LT; HEAD＆GT;＆＃XA; ＆LT;脚本＆GT;＆＃XA; function loadPageBelow（fileName）{＆＃xA; var xhttp = new XMLHttpRequest（）;＆＃xA; xhttp.onreadystatechange = function（）{＆＃xA; document.getElementById（“content”）。innerHTML = xhttp.responseText;＆＃xA; };＆＃XA; xhttp.open（“GET”，fileName，true）;＆＃xA; xhttp.send（）;＆＃XA; }＆＃XA; ＆LT; /脚本＆GT;＆＃XA; ＆LT; /头＆GT;＆＃XA; ＆LT;身体GT;＆＃XA; ＆lt; p＆gt;＆lt; b＆gt;这是HEADER＆lt; / b＆gt;＆lt; / p＆gt;＆＃xA; ＆lt; a onclick =“loadPageBelow（'page2.php'）”＆gt;点击转到第2页＆lt; / a＆gt;＆＃xA; ＆lt; div id =“content”＆gt;＆＃xA; ＆LT; PHP＆＃XA;包括（ “starter.html”）;＆＃XA; ？＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / BODY＆GT;＆＃XA;＆LT; / HTML＆GT;＆＃XA;

＆＃XA;＆＃XA;   starter.html  
＆＃xA;＆＃xA;  ＆lt; p＆gt;欢迎来到主页＆lt; / p＆gt;＆＃xA;  
＆＃xA;＆＃xA;   page2.php  
＆＃xA;＆＃xA;  ＆lt; canvas id =“canvas”width =“200px”height =“200px”＆gt; HI＆lt; / canvas＆gt;＆＃xA;＆lt; script type =“text / javascript”src =“script.js”＆gt;＆lt; / script＆gt;＆＃xA;＆lt; script＆gt;＆＃xA; leggo（）;＆＃XA;＆LT; /脚本＆GT;＆＃XA;  
＆＃XA;＆＃XA;  的script.js  
 ＆＃xA;＆＃xA;   function leggo（）＆＃xA; {＆＃xA; var ctx = document.getElementById（'canvas'）。getContext（'2d'）;＆＃xA; ctx.fillRect（0,0,100,100）;＆＃xA;}＆＃xA;  
＆＃xA;＆＃xA; 要像我一样运行Web服务器，请转到包含该文件夹的文件夹程序并在终端输入 php -S localhost：8000 。然后转到浏览器并输入 http：// localhost：8000 / heading.php  
＆＃xA;＆＃xA;  ----------- -  -  -  -  -  -  -  -  -  -  -  -  -  - 编辑 -  -  -  -  -  -  -  -  -  - - ------------------ 
＆＃xA;＆＃xA; 我使用jquery进行了AJAX调用：
＆＃xA;＆ #xA;   $（document）.ready（function（）{＆＃xA; $（“a”）。click（function（）{＆＃xA; $（“＃content”）。load （“page2.php”）;＆＃xA;}）;＆＃xA;}）;＆＃xA;  
＆＃xA;＆＃xA; 现在我得到了错误：
＆＃xA;＆＃xA;   主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看 https://xhr.spec.whatwg.org/ 。  
＆＃xA;＆＃xA; 可能是其他内容。任何帮助将不胜感激＆＃xA;

Answer 1

我不确定我是否理解为什么要使用JavaScript包含HTML页面。这不常见，可能还有其他方法可以做到这一点。在任何情况下，如果你坚持这样做，你需要确保，特别是在这样做时你没有完整的文件。所以starter.html看起来应该更像这样：

        <p>Welcome to the homepage</p>

page2.php应该更像这样：

    <script>
        function leggo() {
            var ctx = document.getElementById('canvas').getContext('2d');
            ctx.fillRect(0,0,100,100);
        }
    </script>
    <canvas id="canvas" width="200px" height="200px">HI</canvas>
    <script>
        leggo();
    </script>

然后你应该在leggo()的{{1}}添加xhttp.onreadystatechange的电话，如下所示：

loadPageBelow

Answer 2

由于您只是在已加载正文的div的innerHTML中加载内容，因此您应该从starter.hml和page2.php中删除和标记。您的脚本也应该放在所有的html标记下。完成此操作后，要初始化leggo（）函数，只需添加文档就绪检查。

示例

<script> function leggo() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0,0,100,100); } if(document.readyState == "complete"){ leggo() } </script>

Answer 3

我要走出困境，假设你的HTML没有被解析，leggo()函数正在搜索id为canvas的画布。由于页面正在解释响应，因此该元素尚未编写。

我不打算批评你的密码。我建议你推迟脚本，直到页面加载到Web浏览器中。为此，请将您的leggo()功能与HTML分离到外部JavaScript文件，然后更新HTML <script>代码，以包含defer和src属性。

如果无法使用外部脚本，我建议使用jQuery onload函数来检测内容是否已加载。

如果jQuery不可用，那么我建议遵循这个thread来检测是否在不使用jQuery的情况下加载内容。

建议的替代方案： heading.php

<!DOCTYPE html>
<html>
<head>
    <script>
        function loadPageBelow(fileName) {
            this.document.location = "http://localhost/heading.php?page="+fileName;
        }
    </script>
</head>
<body>
    <p><b>THIS IS THE HEADER</b></p>
    <a onclick="loadPageBelow('page2.php')">Click to goto page 2</a>
    <div id="content">
        <?php
            if(isset($_GET['page'])) {
                include($_GET['page']);
            } else {
                include("starter.html");
            }
        ?>
    </div>
</body>
</html>

使用Javascript（<script>和onload）与Ajax调用

3 个答案: