Question

我必须为学校作业建立一个模拟网站。该网站涉及搜索功能。对于分配，搜索功能不必完全正常;所以对于模型，我希望有一个iframe，它会在按下按钮后更改src =“”值。首先，iframe将显示一个图像，然后在客户端/用户输入内容（输入无关紧要的任何字符串）并点击“搜索”之后，我想要更改iframe的src。我想知道是否有任何方法可以使用javascript。我很新，对javascript知之甚少。我需要更改的iframe具有search_frame的id和id。这是我的代码：

<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="HOME.CSS"/>
</head>

<body>
    <div id="main">
      <div id="top" >
      <a href="" id="LOGO">
        <img alt="LOGO" height="37" src="LOGO.JPG" width="342" />
      </a>
        <img id="Cheetah_Logo" alt="cheetah_logo" height="29" src="Cheetah_Corner.PNG" width="205" /><a id="CHEETAH_LINK">
      </a>
  </div>

      <div  id="center">
        <div id="Left_Section">
            <div id="checkBox">
                <form>
                    <input type="radio"/>Text-Books
                    <input type="radio"/>eBooks
                    <input type="radio"/>Class-Notes
                    <input type="radio"/>Exams
                    <input type="radio"/>Tutors
                    <input type="radio"/>Software
                    <input type="radio"/>Homework
                    <input type="radio"/>Free-Stuff
                    <input type="radio"/>Events
                    <input type="radio"/>Other 
                    <a id="Advanced" href="http://Home.html">Advanced Search</a>
                </form>
                <div id="search_Div">
                    <form id="Search">
                        <input id="search_Bar" type="text" />
                        <button>Search</button>
                    </form>
                </div>
            </div>
            <div id="search_results">
                <iframe id="search_frame" scrolling="yes" src="image.png">
                    Your system does not support frames
                </iframe>
            </div>
            <div id="links">
            <a href="Product.html" id="link_product">

            </a>
            <a href="profile_2.html" id="link_profile">
                <img id="profile_button" alt="profile_button" src="profile_button.jpg" />
            </a>
            <a id="click_here" href="profile_2.html">
                Click here to view your profile!
            </a>
            </div>
      </div>

  <div id="bottom">
      <center>
        <img src="bottom_bar.JPG" alt="bottom_bar" />
      </center>
  </div>

</div>
<div>
    <img src="Left_Filler.JPG" alt="Left_Filler" id="Left_Filler"/>
    <img src="Right_Filler.JPG" alt="Right_Filler" id="Right_Filler"/>
</div>

</div>
</body>
</html>

这是我想要运行的脚本类型的概念：

这会将iframe设置为图像：

<script type="text/javascript">
    function rowdy(num){
    variable1='Rowdy.jpeg';
    return variable1;
    }
</script>

按下按钮后，这是我的模拟搜索：

<script type="text/javascript">
function mockSearch(var1)
    {
        var1='Results_Mock_CSS.css';
        return var1;    
    }
</script>

我知道这些是不正确的，但我认为可能有一种方法可以将函数调用放在srame的iframe中，任何帮助，指导或想法都将非常感谢，谢谢高级！

Answer 1

您只需在按钮上设置点击事件，例如

<input type="button" value="Search" onclick="SearchClicked();"/>

然后点击可以改变来源，如下所示。

<script type="text/javascript">
    function SearchClicked() {
        document.getElementById('search_frame').src = 'Rowdy.jpg';
    }
</script>

Answer 2

首先，杀死“form”元素，因为它基本上表示返回到您不想要的服务器（sortof，您可能希望稍后返回，但在您理解之前保留它）。然后为找到iframe的按钮安装onclick处理程序并更新src属性。

像

这样的东西

        <div id="search_Div">
        <input id="search_Bar" type="text" />
        <button onclick="document.getElementById('search_frame').src='Rowdy.jpeg';">
           Search</button>
        </div>

会这样做。

Answer 3

如前所述，您可以使用onClick属性。你也可以使用jQuery魔法（效率较低，但对于学校项目来说，差异可以忽略不计）。

首先，在头部，您必须使用语句

导入jQuery

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

然后，你可以把它放在它之后

<script>
    $(document).ready(function() {
        $('button').click(function() {
            $('#search_frame').attr('src', 'Rowdy.jpg');
        }
    }
</script>

将方法绑定到按钮上的click事件。

在html中使用的JavaScript变量

3 个答案: