代码：
<!DOCTYPE html><html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
iframe{
display: block
margin: 0 auto
margin-top: 100px
}
</style>
</head>
<body>
<input type="text" id="text1" name="data" value="">
<input type="button" id="but" value="百度一下">
<script>
var but = document.getElementById('but')
but.onclick = function(){
var text1 = document.getElementById('text1').value
if (text1) {
var url = 'http://www.baidu.com/s?wd=' + text1
var iframe = document.getElementsByTagName('iframe')[0]
iframe.setAttribute('src',url)
}else{
alert('请输入内容')
}
}
</script>
<iframe src="https://www.baidu.com/" width="80%" height="300" frameborder="1" scrolling="yes"></iframe>
</body>
</html>
css样式没搞，有兴趣加上自己玩！
1：获取HTML中文档中的文本内容，可以用innerHTML获取，innerHTML支持所有浏览器。也可以用innerText获取，但是innerText火狐浏览器不支持，所以要写兼容：var txt = obj.innerText || textContent2：将获取的文本（string数据类型）用split()方法转换成数组。split()方法参数传你需要的指定文字 ----->str.split("你指定的文字")
3：该数组的长度减一就是你指定文字出现的次数。----->console.log(arr.length-1)
4：如果对以上步骤还有哪里不懂可以私聊我 ^_^,或者加我企鹅
5：望采纳，谢谢
你这个效果得用异步交互实现:
可以选择jquery的ajax
下面显示的结果由php页面查找然后返回给当前页面然后再做显示.
不知道你懂了没..
如果不懂给你讲仔细讲下吧
1.html
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<script src='jquery.1.9.1.min.js'></script><!--下载的jquery文件-->
<style type="text/css">
table{border-collapse:collapsemargin-top:50px}
td{padding:5pxtext-align:centerborder:1px solid #333}
p{width:500pxmargin:60px auto 0 auto}
.price{width:60px}
</style>
</head>
<body>
<p>请输入要搜索的书名：<input type="text" id="name" style="width:200px" />
<input type="button" id="btn" value="搜索" />
</p>
<table id='result'>
</table>
<script>
$("#btn").click(function(){
var name=$.trim($("#name").val())
if(name=='')
{
alert("请输入书名")return false
}
$.ajax({
'url':'1.php',
'dataType':'text',
'data':{name:name},
'type':'post',
'success':function(res){
$("#result").html(res)
},
'error':function(){alert("交互失败")}
})
})
</script>
</body>
</html>
1.php
<?php
$name=$_POST['name']
/*数据库查找
然后根据查找出来的数据
循环成类似
<tr>
<td>书名</td>
</tr>
<tr>
<td>书名</td>
</tr>
这样的*/
//比如最后的结果是$data
die($data)
?>
