Question

我正在从事特殊项目，我几乎完成了它。我的问题是*sending parameter to iframe*。

我的目标是创建像简单编辑器。

这些是我的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。

Answer 1

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

＆＃39; Talk＆＃39;

让我们将用户的页面请求视为与您的服务器的对话。这就是它的失败方式：

浏览器：嘿服务器，你能给我blah.html吗？
服务器：当然可以。
浏览器：谢谢！
浏览器：呃服务器，AJAX告诉我需要ajax.php。我可以输出那个吗？
服务器：当然可以。
浏览器：太棒了！
浏览器：好的ajax.php告诉我需要加载iframe.php。我可以得到吗？
服务器：当然可以。
iframe.php：据我所知，浏览器要求我。我什么都不知道ajax.php

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

我的建议

在阅读了您发布的评论之后，如果我没有弄错的话，您似乎正在尝试模仿用户输入的代码预览器。有很多原因可以解释为什么像JSFiddle这样的网站会使用iframe元素，其中一个原因是阻止用户的脚本到达其境界之外来操纵页面上的内容。如果您想实现这一点，您的代码结构需要更改。

首先，所有这一切发生的HTML页面应该已经在页面上显示了iframe元素。尚未设置其src目标。例如，像这样的东西就足够了：

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

其次，我会使用一个目标设置为iframe的表单。这允许您将他们键入的数据POST到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>

<强> submit.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);

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

使用ajax将参数发送到iframe

1 个答案:

＆＃39; Talk＆＃39;

我的建议