带有 PHP 变量中的变量 URL 的 iFrame答案

【问题标题】：iFrame with Variable URL in PHP Variable带有 PHP 变量中的变量 URL 的 iFrame
【发布时间】：2014-11-18 08:26:30
【问题描述】：

我有一个html表单和一个php表单。

有一个包含不同 URL 的下拉菜单。当按下提交按钮时，它会返回一个 iFrame，其中包含来自下拉列表的 URL。

我的问题：我无法让 iFrame 显示网页。它只是显示变量。

HTML 表单

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ajax Example</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    <ul id="info1">
        <li>Put anything in the field below.</li>
    </ul>
    <form id="form1">
        <input type="text" name="field1" id="field1">
        <input type="submit" name="submit" id="submit" value="Submit Form">
    </form>
    <strong> Site <br/> </strong>
    <select form="form1" id="MenuURL">
        <option value="google.com">Google</option>
        <option value="yahoo.com">Yahoo</option>
    </select>
    <script>
    $('#form1').submit(function(event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: $(this).serialize(),
            dataType: 'json',
            success: function (data) {
                console.log(data);
                $('#info1').html(data.msg);
            }
        });
    });
    </script>
</body>
</html>

PHP 代码

<?php
class ajaxValidate {
    function formValidate() {
        //Put form elements into post variables (this is where you would sanitize your data)
        $field1 = @$_POST['field1'];
        $URL = @$_POST['MenuURL'];
        //Establish values that will be returned via ajax
        $return = array();
        $return['msg'] = '';
        $return['error'] = false;
        //Begin form validation functionality
        if (!isset($field1) || empty($field1)){
            $return['error'] = true;
            $return['msg'] .= '<li>Error: Field1 is empty.</li>';
        }
        //Begin form success functionality
        if ($return['error'] === false){
            $return['msg'] = \'<li><iframe src=\" {$URL;}\" style="width:250px;height:250px;overflow:scroll;" id="MyFrame"></iframe></li>';
        }
        //Return json encoded results
        return json_encode($return);
    }
}
$ajaxValidate = new ajaxValidate;
echo $ajaxValidate->formValidate();
?>

【问题讨论】：

标签： php jquery html arrays ajax

【解决方案1】：

首先，语法错误：

$return['msg'] = \'<li><iframe src=\" {$URL;}\" style="width:250px;height:250px;overflow:scroll;" id="MyFrame"></iframe></li>';
                 ^                         ^

我认为在谷歌中你不能直接使用src="google.com"，因为谷歌正在发送一个“X-Frame-Options: SAMEORIGIN”响应头，你不能简单地在 iframe 中将 src 设置为“http://www.google.com”。

或者，您可以使用：

http://www.google.com/custom?q=&btnG=Search

所以在你的 PHP 中：

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    class ajaxValidate {
        function formValidate() {
            //Put form elements into post variables (this is where you would sanitize your data)
            $field1 = $_POST['field1'];
            $URL = $_POST['MenuURL'];
            //Establish values that will be returned via ajax
            $return = array();
            $return['msg'] = '';
            $return['error'] = false;
            //Begin form validation functionality
            if (!isset($field1) || empty($field1)){
                $return['error'] = true;
                $return['msg'] .= '<li>Error: Field1 is empty.</li>';
            }
            //Begin form success functionality
            if ($return['error'] === false){
                $return['msg'] = '<li><iframe src="'.$URL . $field1.'" style="width:250px;height:250px;overflow:scroll;" id="MyFrame"></iframe></li>';
            }
            //Return json encoded results
            return json_encode($return);
        }
    }
    $ajaxValidate = new ajaxValidate;
    echo $ajaxValidate->formValidate();
    exit;
}

在您的标记和 JS 中：

<ul id="info1">
    <li>Put anything in the field below.</li>
</ul>
<form id="form1">
    <input type="text" name="field1" id="field1">
    <input type="submit" name="submit" id="submit" value="Submit Form">
</form>
<strong> Site <br/> </strong>
<select form="form1" id="MenuURL">
    <option value="http://www.google.com/custom?btnG=Search&q=">Google</option>
    <option value="yahoo.com">Yahoo</option>
</select>
<script>
$('#form1').submit(function(event) {
    event.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: {field1: $('#field1').val(), MenuURL: $('#MenuURL').val() },
        dataType: 'JSON',
        success: function (data) {
            console.log(data);
            $('#info1').html(data.msg);
        }
    });
});
</script>

Working Demo for google only

【讨论】：

！！我快到了！！ :) 答案很好
@Awena 你可以回答雅虎部分，我没有完全回答，我只是想提出一个起点而不是全部回答，但基本上想法就在那里，获取网址并附加搜索字符串，并将其提供给 src=""
好吧，我从没想过。我不知道 Yahoo 限制嵌入 Iframe .. 但我发现这个链接在 Stack 上很有用：stackoverflow.com/questions/16624919/…
@Awena 实际上我只是在这里挖掘了关于谷歌的限制，好在有一个解决方法，在雅虎上，现在这就是可悲的部分哈哈
谢谢！那行得通。编辑：下拉列表的值没有传递给 PHP！