通过 AJAX 在 src 中加载带有 $_GET 变量的 iframe答案

【问题标题】：Loading an iframe with a $_GET variable in the src through AJAX通过 AJAX 在 src 中加载带有 $_GET 变量的 iframe
【发布时间】：2018-09-27 15:02:34
【问题描述】：

在我的网站上，我有一个项目列表和一个编辑按钮，或者一个创建新项目的选项。

当您单击编辑时，我通过 AJAX 向另一个 PHP 文件发出请求，该文件返回编辑表单，其中预先填写了您单击编辑的项目的详细信息。

如果您选择添加新项目的选项，它会对同一文件执行另一个 AJAX 调用，并返回没有填写任何内容的表单。

不过，表单的一部分是在 iframe 中制作的 WYSIWYG 文本编辑器，如下所示：

HTML：

<iframe name='richTextField' id='wysiwyg'></iframe>

脚本：

richTextField.document.designMode = 'On';

所以当我想创建一个新项目时，它可以正常工作，它会加载表单，我可以在 iframe 中编辑我想要的任何内容。

但是，当我想编辑现有项目时，我会在 iframe 中添加 src 属性，如下所示：

src='myFile.php?id=$edit_id'

源文件非常基本，只有几行，但它使用$_GET 变量作为您要编辑的项目的ID。它在数据库中查询此 ID 并仅回显如下内容：

<?php
if (isset($_GET['id'])) {
    $ID = $_GET['id'];
    $params = [$ID];
    $sql = "SELECT * FROM tableWHERE id=?";
    $stmt = DB::run($sql,$params);
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $content = $row["content"];
    }
}
?>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <?php echo $content; ?>
</body>
</html>

这会按预期将我想要的内容加载到 iframe 中，但我无法对其进行编辑。

我很确定这与我如何使用 AJAX 加载一个文件有关，该文件使用 $_GET 变量从另一个文件中获取某些内容，但它以我想要的方式加载内容我可以不要编辑它。

任何想法或解释为什么会发生这种情况或任何建议将不胜感激。

【问题讨论】：

嗯.... 1 票关闭，没有 cmets 或任何东西？？？

标签： php ajax get

【解决方案1】：

你从哪里打电话给richTextField.document.designMode = 'On';？

你可以试试 contentDocument 的 iframe 吗？

document.getElementById('wysiwyg').contentDocument.designMode="on";

编辑：编辑以添加工作代码以响应注释，因为代码未在注释中格式化。

您可以看到 iframe 最初是不可编辑的。在按钮点击事件之后，iframe 是可编辑的，因为 designMode 设置为 'on';

<html>
    <head></head>
    <body>
        <iframe name='richTextField' id='wysiwyg'></iframe>
        <div id="div">
            Div Content
        </div>
        <button id="testbutton">Test Button</button>
        <script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
        <script>
            $('#testbutton').click(function(){
                var xmlhttp = new XMLHttpRequest(); 
                xmlhttp.onreadystatechange = function(){ 
                    if(this.readyState == 4 && this.status == 200){ 
                        $("#div").html(this.responseText); 
                        $("#div").slideDown("slow"); 
                        enableEditMode(); 
                    } 
                }; 
                var id = 51;
                xmlhttp.open("POST", "test.php?id="+id, true); 
                xmlhttp.send(); 
            });
            function enableEditMode (){ 
                richTextField.document.designMode = 'On'; 
            }
        </script>
    </body>
</html>

【讨论】：

感谢您的回答，我试过了，结果一样。在我的 AJAX 调用之后，我在我的 JS 中调用它。 var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ if(this.readyState == 4 && this.status == 200){ $("#div").html(this.responseText); $("#div").slideDown("slow"); enableEditMode(); } }; xmlhttp.open("POST", "myOtherFile.php?id="+id, true); xmlhttp.send(); function enableEditMode (){ richTextField.document.designMode = 'On'; }
请使用您提供的代码检查我的答案中的编辑以获取有效的解决方案。在我的代码示例中，我已将 myOtherFile.php 更改为 test.php。
感谢您的帮助，非常感谢。这就是我所拥有的（或多或少）我认为在这种情况下问题出在“test.php”文件上。该页面返回 iframe，如果设置了 id，则有一个函数将“src”添加到 iframe。我添加的“src”属性和用作“src”的实际页面在我原来的问题中。
我尝试不设置src，直到enableEditMode() 函数像document.getElementById("wysiwyg").setAttribute("src", "myFile.php?id="+id); 一样被调用，但结果再次相同。