使用ajax向iframe发送参数答案

【问题标题】：Sending parameter to iframe using ajax使用ajax向iframe发送参数
【发布时间】：2014-06-17 14:55:35
【问题描述】：

我正在做一个特殊的项目，我几乎完成了。我的问题是*sending parameter to iframe*。

我的目标是创建 simple 编辑器，例如 codepen 或 jsfiddle。

这些是我的 ajax 代码：

        $.ajax({
            data: {html: html, css: css, js: js},
            success: function(r) {
                if(r) {
                    $("#preview").html(r.preview);
                } else {
                    alert("error");
                }
            }
        });

我的 ajax.php

$html = $_POST["html"];
$css = $_POST["css"];
$js = $_POST["js"];

$r = array();



function d($html, $css, $js) {
    $iframe .= '<iframe src="iframe.php">';

    $iframe .= '</iframe>';
    return $iframe;
}

$r["preview"] = d($html, $css, $js);
echo json_encode($r);

最后是我的 iframe.php

function prev($html = "", $css = "", $js = "") {
    $iframe .= '<html>';
    $iframe .= '<head>';
    $iframe .= '<style>' . $css . '</style>';
    $iframe .= '<script>' . $js . '</script>';
    $iframe .= '<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>';
    $iframe .= '</head>';
    $iframe .= '<body>';
    $iframe .= $html;
    $iframe .= '</body>';
    $iframe .= '</html>';
    return $iframe;
}
echo prev(); // which parameters I use?

它正在工作，但我没有发送来自 textarea 的参数？我没有关联 ajax.php 和 iframe.php。

【问题讨论】：

不能把页面上已经固定的iframe设置好，然后把值直接post到iframe.php中，而不是通过另一个页面传递吗？
$iframe .= '<iframe src="iframe.php?html='.$html.'&css='.$css.'&js='.$js.'">';我当时这样用"没用。但我相信我可以用 POST 方法解决。
我的意思是，你为什么要在 ajax 响应中创建 <iframe>？为什么不保留已经创建的 iframe，然后将带有目标的表单发布到 iframe？
我分析了codepen、jsfiddle等。使用 iframe 是最好的解决方案。其他方式是错误的和不充分的。有一个地方我错过了。
我不是告诉你不要使用iframe...我只是说你应该已经在页面上设置了<iframe>！！ JsFiddle 本身已经在页面上设置了所有四个 iframe...它不会动态创建它！！！

标签： javascript php jquery css ajax

【解决方案1】：

我认为您误解了这里实际发生的情况。让我看看我是否可以解释当前正在发生的事情以及我认为您应该从这里开始的地方。

“谈话”

让我们将用户的页面请求视为与您的服务器的对话。以下是它的下降方式：

浏览器：嘿服务器，你能给我blah.html吗？
服务器：好的，就在这里。
浏览器：谢谢！
浏览器： 呃服务器，AJAX 告诉我我需要 ajax.php。我可以得到那个输出吗？
服务器：好的，就在这里。
浏览器：太棒了！
浏览器： 好的，ajax.php 告诉我我需要加载 iframe.php。我能得到吗？
服务器：好的，就在这里。
iframe.php： 就我而言，Browser 请求了我。我对ajax.php一无所知

...这就是你卡住的地方。所有的 HTML、CSS 和 JS 都被发送到ajax.php，而那个页面并没有真正用它做任何事情。是的，它打印出一个iframe 标记，源设置为iframe.php，但该页面不知道您提供给ajax.php 的所有内容。

我的建议

阅读您发布的 cmets 后，如果我没记错的话，您似乎正在尝试模仿用户输入代码预览器。像 JSFiddle 这样的网站使用 iframe 元素的原因有很多，其中之一是防止用户的脚本到达其领域之外来操作页面上的内容。如果你想实现这个，你的代码结构需要改变。

首先，您的 HTML 页面上应该已经有你的 iframe 元素。只是不要设置它的src 目标。例如，这样的事情就足够了：

<iframe id="preview"></iframe>

其次，我会使用一个将目标设置为iframe 的表单。这允许您将他们键入的数据发布到 PHP 文件，然后实质上将该文件的输出发送到要加载的 iframe。一个非常简单的示例可能如下所示：

<form action="submit.php" method="post" target="preview">
    <textarea name="html"></textarea>
    <textarea name="css"></textarea>
    <textarea name="js"></textarea>
    <input type="submit" value="Run!" />
</form>

提交.php：

$html = $_POST['html'];
$css = $_POST['css'];
$js = $_POST['js'];

// Using your code from before...
function prev($html = "", $css = "", $js = "") {
    $iframe = '<html>';
    $iframe .= '<head>';
    $iframe .= '<style>' . $css . '</style>';
    $iframe .= '<script>' . $js . '</script>';
    $iframe .= '<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>';
    $iframe .= '</head>';
    $iframe .= '<body>';
    $iframe .= $html;
    $iframe .= '</body>';
    $iframe .= '</html>';
    return $iframe;
}

echo prev($html, $css, $js);

警告：这是未经测试的代码。

【讨论】：

感谢您的长时间回复。我明白所有的事情。我正在使用 iframe，因为 codepen 也在使用 iframe。同样要运行 JS 代码，使用 iframe 是必要的，因为 eval() 无助于在 iframe 中运行脚本。也谢谢你的谈话:)
我知道这个解决方案。使用目标是工作问题。但我正在尝试使用 jQuery/Ajax 制作编辑器。例如，谢谢。这确实有效。
我不确定我是否理解。这解决了你的问题吗？如果是这样，请将其标记为正确，以便其他人知道您得到了帮助。如果没有，请说明为什么需要使用 jQuery 的 AJAX 功能。
所以您希望它在他们输入内容后动态更改预览？如果您允许插入 JavaScript 代码，这可能是一个问题，因为如果它们没有完成与它匹配的 HTML 怎么办？如果在 textarea 失去焦点时触发预览，则 JS 代码可能会失败。如果您实施任何类型的错误处理，这可能会给出错误的警告。
警告并不重要。重要的是运行 JS 代码 :)