代码之家 › 专栏 › 技术社区 › Paddy Hallihan

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

get ajax php

-1

Paddy Hallihan · 技术社区 · 7 年前

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

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

HTML格式:

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

richTextField.document.designMode = 'On';

但是,当我想编辑现有项时,我会添加一个 src 属性,如下所示:

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

源文件非常基本,只有几行,但它使用 $_GET

<?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 回复 | 直到 7 年前

ViralP 7 年前

你从哪里打来的 richTextField.document.designMode = 'On'; ?

你能试试iframe的contentDocument吗?

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>