动态更改iframe的src内容

Changing the src content of iframe dynamically

本文关键字：src 内容 iframe 动态      更新时间：2023-09-26

我正在制作一个用于搜索结果的页面。简单地说，我有一个登录页面，它会引导你进入另一个页面（比如主页）。这个页面包含1个下拉框（和）、1个文本框、1个按钮和1个iframe，其中包含我的表所在的页面。现在我有一个用户列表，它显示在那个表上，有一个firstname、lastname和middlename的标题，这是启动时显示的所有数据。现在我从下拉框中选择了firstname，然后键入我的名字，这将导致对那些与我同名的人进行筛选。我在表格页面上使用了一个过滤器，在其中添加了参数，例如//localhost/test/table.php？fname=测试

现在的问题是，iframe应该是唯一一个会改变的，使我的主页完好无损。现在，iframe src将在单击时根据我在下拉框中选择的内容进行更改，正如我已经说过的那样，不使用表单提交，并且值将基于文本框上的文本。如果可能的话，也可以不在src链接上使用http://。

好吧，我几乎完成了onclick的部分，将使用以下脚本更改iframe页面：

<script type='text/javascript'>
        function goTo(){
        top.table.location = 'http://localhost/test/home.php; 
        }
        </script>

应该是这样的：

$dropdownvalue = dropdownselectedtext
$textvalue = valueoftextbox
//localhost/test/table.php?$dropdownvalue$textvalue

这是我的第一部作品。评论以更好地理解。假设后面跟有文本的"#"表示某个值。供参考。

$acct_no = "#LOG_IN_ID OF USER";
            echo "<script type='text/javascript'>
            function goTo(){
            top.table.src = '#SOMEURLHERE'; 
            }
            </script>";
            echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'>
            <tr>
                <td style='padding-left:30px;padding-top:20px;'>
                    <h3>SELECTION TEST</h3>
                </td>
                <td align='right' style='padding-right:30px;' height='120px'>
                    <select name='filter' id='filter'>
                        <option value='fname'>fname</option>
                        <option value='lname'>lname</option>
                        <option value='mname'>mname</option>
                    </select>
                    <input type='text' value='Enter text here' id='textbox'>
                    &nbsp; 
                    <input type='button' value='Search' onClick='goTo();'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue
                </td>
            </tr>
            <tr>
                <td colspan='2' align='center'>
                    <iframe src='table.php?ref=$acct_no' name='table' width='730px' height='300px' frameborder='0'></iframe> 
                </td>
            </tr>
            </table>";

我建议您将<script>容器放在PHP区域之外。

<script type="text/js" language="javascript">
    //Your function goes here
</script
<?php echo "<form name='someName' action='#'>
echo "<table border='0' align='center' bgcolor='#ffffff' width='800px'>
<tr>
    <td style='padding-left:30px;padding-top:20px;'>
        <h3>SELECTION TEST</h3>
    </td>
    <td align='right' style='padding-right:30px;' height='120px'>
        <select name='filter' id='filter'>
    <option value='fname'>fname</option>
    <option value='lname'>lname</option>
    <option value='mname'>mname</option>
        </select>
        <input type='text' value='Enter text here' id='textbox'>
        &nbsp; 
        <input type='button' value='Search' onClick='javascript: return goTo('"this.parent.filter.value, this.parent.textbox.value'");'> //this should give me the filters e.g: #SOMEURLHERE.php?#selectedfiltervalue=#textboxvalue
    </td>
</tr>
<tr>
    <td colspan='2' align='center'>
        <iframe src='' name='table' width='730px' height='300px' frameborder='0'></iframe> 
    </td>
</tr>
</table></form>";?>

您在整个部分中没有使用<form>标记，因此管理字段很困难。另外，请尝试我在上一篇文章中定义的javascript。

试着在下拉框中的onclick/onchange处理程序中使用这个（对于每个值）：

javascript: return goto('"$dropdownvalue'", '"$textvalue'");

并且，将其纳入

<script type='text/javascript'>
    function goto(var1, var2){
        finLink = "http://localhost/test/table.php?" + var1 + var2
        top.table.location = finLink; //Not sure if it will be top.table.location or top.table.src
    }
</script>

您可以为此使用jquery：

$('#myiframeid').attr('src', 'http://some.url.here');
相关文章：