douding_1073 2014-06-17 14:55
浏览 83

使用ajax将参数发送到iframe

I am working on special project and I almost finished it. My problem is *sending parameter to iframe*.

My aim is to create simple editor like codepen or jsfiddle.

These are my ajax codes:

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

My 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);

And finally my 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?

It is working but I didnt send parameter which comes from textarea? I didnt associate ajax.php and iframe.php.

  • 写回答

1条回答 默认 最新

  • dongshijiao6890 2014-06-17 15:32
    关注

    I think you are misunderstanding a bit of what actually happens here. Let me see if I can explain what is currently happening and where I think you should go from here.

    The 'Talk'

    Let's think of a user's page request as a conversation with your server. Here's kind of how it's going down:

    • Browser: Hey server, can you give me blah.html?
    • Server: Sure, here it is.
    • Browser: Thanks!
    • Browser: Uh server, AJAX is telling me I need ajax.php. Can I have the output of that?
    • Server: Sure, here it is.
    • Browser: Great!
    • Browser: Ok well ajax.php told me I need to load iframe.php. Can I get that?
    • Server: Sure, here it is.
    • iframe.php: As far as I'm concerned, Browser requested me. I know nothing of ajax.php

    ... and that's where you're stuck. All that HTML, CSS, and JS was sent to ajax.php, and that page didn't really do anything with it. Yeah, it printed out an iframe tag with the source set as iframe.php, but that page has no idea about all that stuff you gave to ajax.php.

    My Suggestion

    After reading through the comments you posted, it looks like you're trying to mimic a user-input code previewer, if I'm not mistaken. There are plenty of reasons why sites like JSFiddle use iframe elements, one of which is to prevent the user's script from reaching outside of its realm to manipulate stuff on the page. If you would like to implement this, your code structure needs to change.

    First, your HTML page where all this is happening should have your iframe element already on the page. Just don't set its src target yet. For example, something like this will suffice:

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

    Second, I would use a form that has its target set as the iframe. This allows you to POST the data they type to the PHP file, then essentially send the output of that file to the iframe to be loaded. A very simple example might look like this:

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

    WARNING: This is untested code.

    评论

报告相同问题？

悬赏问题

  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 划分vlan后不通了
  • ¥15 GDI处理通道视频时总是带有白色锯齿
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）
  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大