Fatal编程技术网
  • php/
  • Php 通过AJAX在src中加载带有$\u GET变量的iframe

Php 通过AJAX在src中加载带有$\u GET变量的iframe

php ajax

Php 通过AJAX在src中加载带有$\u GET变量的iframe,php,ajax,get,Php,Ajax,Get,在我的网站上，我有一个项目列表，旁边有一个编辑按钮，或者一个创建新项目的选项 当您单击编辑时，我通过AJAX向另一个PHP文件发出请求，该文件返回预填充有您单击要编辑的项目详细信息的编辑表单 如果选择添加新项的选项，它将对同一文件执行另一个AJAX调用，并返回表单，而不填写任何内容 不过，表单的一部分是在iframe中制作的所见即所得文本编辑器，如下所示： HTML: 因此，当我想要创建一个新项目时，它可以很好地工作，它加载表单，我可以在iframe中编辑我想要的任何内容 但是，当我想要编辑现有

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

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

如果选择添加新项的选项，它将对同一文件执行另一个AJAX调用，并返回表单，而不填写任何内容

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

HTML:

因此，当我想要创建一个新项目时，它可以很好地工作，它加载表单，我可以在iframe中编辑我想要的任何内容

但是，当我想要编辑现有项时，我会向iframe添加一个
src
属性，如下所示：

src='myFile.php?id=$edit_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>
源文件非常基本，只有几行，但是它使用了一个
$\u GET
变量作为您试图编辑的项目的id。它向DB查询此ID，并只回显如下内容：

src='myFile.php?id=$edit_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变量从另一个文件获取内容，但它以我想要的方式加载内容，我无法编辑它

如果您有任何想法或解释，或者有任何建议，我们将不胜感激。

您从何处调用
richTextField.document.designMode='On'

您可以尝试将contentDocument用于iframe吗


document.getElementById（'wysiwyg'）.contentDocument.designMode=“on”

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

您可以看到iframe最初是不可编辑的。
单击按钮事件后，iframe可编辑，因为设计模式设置为“开”

`



Div内容
测试按钮
$（“#测试按钮”）。单击（函数（）{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）{
如果（this.readyState==4&&this.status==200）{
$（“#div”）.html（this.responseText）；
$（“#div”）。向下滑动（“慢速”）；
enableEditMode（）；
} 
}; 
var-id=51；
open（“POST”，“test.php？id=“+id，true”）；
xmlhttp.send（）；
});
函数enableEditMode（）{
richTextField.document.designMode='On'；
}



`
Hmmm。。。。1投票关闭，没有评论或任何东西？？？谢谢你的回答，我尝试了这个和相同的结果。在AJAX调用之后，我在JS中调用它
var xmlhttp=new XMLHttpRequest（）；xmlhttp.onreadystatechange=function（）{if（this.readyState==4&&this.status==200）{$（“#div”）.html（this.responseText）；$（“#div”）.slideDown（“slow”）；enableEditMode（）}；open（“POST”，“myOtherFile.php？id=“+id，true”）；xmlhttp.send（）；函数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”）但结果相同。

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