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.
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.
Let's think of a user's page request as a conversation with your server. Here's kind of how it's going down:
... 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.
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.