使用输入类型文本更改iframe src

时间:2016-04-09 13:45:22

标签: javascript iframe

我正在尝试使用来自输入的url进行动态src chnge。 这是我的代码:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<form>
    <input type="text" id="id">
    <input type="button" value="Change site" onClick="newSite()">
</form>
    <iframe id="iframe" src="www.google.com"></iframe>
    <script type="text/javascript">
        function newSite() {
            var site = $('#id').val();
            document.getElementById('iframe').src = "http://" + site;
        }    
    </script>
</body>
</html>

所以我的问题是: 按Enter键如何发送表格?而且,为什么它不起作用?

感谢您的回答。

1 个答案:

答案 0 :(得分:0)

请在文本框中提供完整的网址。

&#13;
&#13;
function newSite() {
  var site = $('#id').val();
  var iframe = document.getElementById('iframe');
  iframe.src = site;
  iframe.src = iframe.src;

}   
&#13;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
	<form>
	    <input type="text" id="id" />
	    <input type="button" value="Change site" onClick="newSite()" />
	</form>
  <iframe id="iframe" src="http://www.lipsum.com/" width="900" height='500'></iframe>
</body>
</html>
&#13;
&#13;
&#13;