我正在做一个特别的元素，我快完成了。我的问题是 *向 iframe 发送参数*。
我的目标是创建像 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。
最佳答案
我认为您对这里实际发生的事情有些误解。让我看看我是否可以解释当前发生的情况以及我认为您应该从这里走向何方。
“谈话”
让我们将用户的页面请求视为与您的服务器的对话。以下是它的发展历程:
- 浏览器:嘿服务器，你能给我 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 的表单。这允许您将他们键入的数据发布到 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);
警告:这是未经测试的代码。
关于javascript - 使用ajax将参数发送到iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24267027/