点击替换（搜索）问题

下面的代码可以点击转换搜索百度网页和百度音乐。输入“123456”，搜索结果分别为：
http://www.baidu.com/s?word=123456和http://mp3.baidu.com/m?word=123456
但是遇到复杂一点的搜索该怎么写代码？比如，增加了“谷歌图片”和“新浪微博”这两个单元格后，要求搜索的结果为：http://www.google.com.hk/search?q=123456&tbm=isch和http://s.weibo.com/weibo/123456，这该怎样实现？
谷歌图片搜索直接加<input type="hidden" name="tbm" value="isch">不妥，容易和别的搜索冲突；新浪微博搜索就更难实现了，要加条件语句才可以吗？<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeSearcher(obj) {
    var c = document.getElementById('controller').getElementsByTagName('td');
    var ar = ['http://www.baidu.com/s', 'http://mp3.baidu.com/m'];
    for(var i = 0; i < c.length; i ++) c[i].style.backgroundColor = '#FFF';
    c[obj.cellIndex].style.backgroundColor = '#0FF';
    document.getElementById('searcher').action = ar[obj.cellIndex];
//可不可以在这里加条件语句，直接把ar定义成“http://s.weibo.com/weibo/”+“document.getElementById('name').name = na[obj.cellIndex];”（其中的na可设为['word', 'word', 'q', '???'];最后一项不知道该怎么弄）
}
</script>
</head><body>
<table>
  <tr align="center" id="controller">
    <td style="background-color:#0FF" onclick="changeSearcher(this);"><a href="javascript:void(0);">百度网页</a></td>
    <td onclick="changeSearcher(this);"><a href="javascript:void(0);">百度音乐</a></td>
    <td onclick="changeSearcher(this);"><a href="javascript:void(0);">谷歌图片</a></td>
    <td onclick="changeSearcher(this);"><a href="javascript:void(0);">新浪微博</a></td>
  </tr>
  <tr>
    <td colspan="2">
    <form action="http://www.baidu.com/s" target="_blank" id="searcher">
      <input name="word" type="text" value="" id="name" />
      <input type="submit" value="百度一下" />
    </form></td>
  </tr>
</table>
天气预报：
<iframe src="http://m.weather.com.cn/m/pn1/weather.htm" width="235" height="16" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</body>
</html>

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //这样试试
    function changeSearcher(obj) {
        var c = document.getElementById('controller').getElementsByTagName('td');
        var ar = ['http://www.baidu.com/s', 'http://mp3.baidu.com/m', 'http://www.google.com.hk/search', 'http://s.weibo.com/weibo/'];
    var ar_buttonText = ['百度网页', '百度音乐', '谷歌图片', '新浪微博'];
    var ar_name = ['word', 'word', 'q', ''];
        for(var i = 0; i < c.length; i ++) c[i].style.backgroundColor = '#FFF';
        c[obj.cellIndex].style.backgroundColor = '#0FF';
        document.getElementById('searcher').action = ar[obj.cellIndex];
    document.getElementById('keyword').name = ar_name[obj.cellIndex];
    document.getElementById('searcher').getElementsByTagName('input')[2].value = ar_buttonText[obj.cellIndex];

    //判断当前选择的搜素引擎，决定是否启用隐藏域tbm
    var tbm = document.getElementById('tbm');
    (obj.cellIndex == 2) ? (tbm.disabled = false) : (tbm.disabled = true);
    }//表单触发onsubmit()事件时，判断下当前是否微博搜素，是的时候构造url，打开新窗口
    function isWeibo() {
    //通过keyword文本框的name属性值就能判断
    if (document.getElementById('keyword').name == '') {
    var url = 'http://s.weibo.com/weibo/' + encodeURIComponent(document.getElementById('keyword').value);
    window.open(url);
    return false;
    }
    else return true;
    }
    </script>
    </head><body>
    <table>
      <tr align="center" id="controller">
        <td style="background-color:#0FF" onclick="changeSearcher(this);"><a href="javascript:void(0);">百度网页</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">百度音乐</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">谷歌图片</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">新浪微博</a></td>
      </tr>
      <tr>
        <td colspan="2">
        <form action="http://www.baidu.com/s" target="_blank" id="searcher" onsubmit="return isWeibo();">
          <!--给文本框指定id属性值为"keyword"-->
          <input name="word" type="text" value="" id="keyword" />
          <!--增加一个隐藏域tbm，默认为禁用-->
          <input type="hidden" name="tbm" value="isch" disabled="disabled" id="tbm" />
          <input type="submit" value="百度一下" />
        </form></td>
      </tr>
    </table>
    天气预报：
    <iframe src="http://m.weather.com.cn/m/pn1/weather.htm " width="235" height="16" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
    </body>
    </html>
      

  2.   

    查了些资料，但是仍然没有完全理解下面两句的含义，所以我照葫芦画瓢不成功：
    document.getElementById('searcher').getElementsByTagName('input')[2].value = ar_buttonText[obj.cellIndex];
    (obj.cellIndex == 2) ? (tbm.disabled = false) : (tbm.disabled = true);
    又增加了“网易微博、我的谷歌、百度知道”三项（你的源码没动别的地方，只加了这三个单元格），再请你帮我弄一下吧，估计这次我就能全部照搬了。
    其中网易微博搜索结果为：http://t.163.com/tag/123456
    百度知道搜索结果为：http://zhidao.baidu.com/q?word=123456&ct=17&tn=ikaslist
    我的谷歌比较复杂（表单id="cse-search-box"我可以用你的id="searcher"替换，所以你还用原来的"searcher"就行）文本框size不用管<input type="text" name="q" size="35" />，但是没有value=""，我之前照葫芦画瓢的时候擅自加上了id="keyword"的统一属性（可以不加吗？）已经通过测试了，只是不知道这样改谷歌的广告代码是否违规。所以这个id属性能不加就不加：
    <form action="http://www.google.com.hk/cse" id="cse-search-box" target="_blank">
      <div>
        <input type="hidden" name="cx" value="partner-pub-12345:67890" />
        <input type="hidden" name="ie" value="GB2312" />
        <input type="text" name="q" size="35" />
        <input type="submit" name="sa" value="搜索" />
      </div>
    </form>
    <script type="text/javascript" src="http://www.google.com.hk/coop/cse/brand?form=cse-search-box&amp;lang=zh-Hans"></script><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //这样试试
    function changeSearcher(obj) {
        var c = document.getElementById('controller').getElementsByTagName('td');
        var ar = ['http://www.baidu.com/s', 'http://mp3.baidu.com/m', 'http://www.google.com.hk/search', 'http://s.weibo.com/weibo/'];
        var ar_buttonText = ['百度网页', '百度音乐', '谷歌图片', '新浪微博'];
        var ar_name = ['word', 'word', 'q', ''];
        for(var i = 0; i < c.length; i ++) c[i].style.backgroundColor = '#FFF';
        c[obj.cellIndex].style.backgroundColor = '#0FF';
        document.getElementById('searcher').action = ar[obj.cellIndex];
        document.getElementById('keyword').name = ar_name[obj.cellIndex];
        document.getElementById('searcher').getElementsByTagName('input')[2].value = ar_buttonText[obj.cellIndex];
        
        //判断当前选择的搜素引擎，决定是否启用隐藏域tbm
        var tbm = document.getElementById('tbm');
        (obj.cellIndex == 2) ? (tbm.disabled = false) : (tbm.disabled = true);
    }//表单触发onsubmit()事件时，判断下当前是否微博搜素，是的时候构造url，打开新窗口
    function isWeibo() {
        //通过keyword文本框的name属性值就能判断
        if (document.getElementById('keyword').name == '') {
            var url = 'http://s.weibo.com/weibo/' + encodeURIComponent(document.getElementById('keyword').value);
            window.open(url);
            return false;
        }
        else return true;
    }
    </script>
    </head><body>
    <table>
      <tr align="center" id="controller">
        <td style="background-color:#0FF" onclick="changeSearcher(this);"><a href="javascript:void(0);">百度网页</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">百度音乐</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">谷歌图片</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">新浪微博</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">网易微博</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">我的谷歌</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">百度知道</a></td>
      </tr>
      <tr>
        <td colspan="7">
        <form action="http://www.baidu.com/s" target="_blank" id="searcher" onsubmit="return isWeibo();">
          <!--给文本框指定id属性值为"keyword"-->
          <input name="word" type="text" value="" id="keyword" />
          <!--增加一个隐藏域tbm，默认为禁用-->
          <input type="hidden" name="tbm" value="isch" disabled="disabled" id="tbm" />
          <input type="submit" value="百度一下" />
        </form></td>
      </tr>
    </table>
    天气预报：
    <iframe src="http://m.weather.com.cn/m/pn1/weather.htm " width="235" height="16" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
    </body>
    </html>
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
    //这样试试
    function changeSearcher(obj) {
        var c = document.getElementById('controller').getElementsByTagName('td');

        var ar = [
    'http://www.baidu.com/s',
    'http://mp3.baidu.com/m',
    'http://www.google.com.hk/search',
    'http://s.weibo.com/weibo/',
    'http://t.163.com/tag/',
    'http://www.google.com/search_results/cse',
    'http://zhidao.baidu.com/q'
    ];
    var ar_buttonText = [
    '百度网页',
    '百度音乐',
    '谷歌图片',
    '新浪微博',
    '网易微博',
    '搜索',
    '百度知道'
    ];
    var ar_name = ['word', 'word', 'q', 'sina', 'netease', 'q', 'word']; //为了在提交表单时便于判断选择的是新浪微博还是网易微博，设置不同的文本框name属性值加以区别


        for(var i = 0; i < c.length; i ++) c[i].style.backgroundColor = '#FFF';
        c[obj.cellIndex].style.backgroundColor = '#0FF';
        document.getElementById('searcher').action = ar[obj.cellIndex];

    //document.getElementById('keyword').name = ar_name[obj.cellIndex];
    //文本框已经木有id值了，所以要换别的方法来访问该节点。为了总是能够快速查找到它，要求位置固定，可以把它放在所有隐藏域的前面，作为表单内的第一个子元素
    document.getElementById('searcher').getElementsByTagName('input')[0].name = ar_name[obj.cellIndex];

    //这一行是设置submit按钮的文字，由于增加了几个隐藏域，所以现在的索引值已经跟原来不一样了
    document.getElementById('searcher').getElementsByTagName('input')[6].value = ar_buttonText[obj.cellIndex];

    //判断当前选择的搜素引擎，决定是否启用相应的隐藏域
    var tbm = document.getElementById('tbm');

    /*
    下面这行代码只是用了三目运算符?:，等价于：
    if (obj.cellIndex == 2) tbm.disabled = false;
    else tbm.disabled = true;
    */
    //谷歌图片搜索
    (obj.cellIndex == 2) ? (tbm.disabled = false) : (tbm.disabled = true);

    //谷歌自定义搜索
    //为了少写点代码，定义下面这个变量，代码有点乱，可以在事后再精简下
    var objInput = document.getElementById('searcher').getElementsByTagName('input');
    (obj.cellIndex == 5) ? (objInput[2].disabled = false, objInput[3].disabled = false) : (objInput[2].disabled = true, objInput[3].disabled = true);

    //百度知道搜索
    (obj.cellIndex == 6) ? (objInput[4].disabled = false, objInput[5].disabled = false) : (objInput[4].disabled = true, objInput[5].disabled = true);

    //谷歌自定义搜索的submit按钮设置了name属性值为sa，没去看文档，不知道这一点有没有严格要求，如果不是强制要求的，下面的处理代码可以省略
    //动态设置submit按钮的name属性值，只有当点击的是“我的谷歌”单元格时才设置name属性值为sa，否则设置为空值
    var buttonSubmit = document.getElementById('searcher').getElementsByTagName('input')[6];
    obj.cellIndex == 5 ? buttonSubmit.name = 'sa' : buttonSubmit.name = ''; //if ... else ... 同上


    }//表单触发onsubmit()事件时，需要根据不同情况进行处理
    function isWeibo() {
    var keyword = document.getElementById('searcher').getElementsByTagName('input')[0];
    if (keyword.name == 'sina') {
    var url = 'http://s.weibo.com/weibo/' + encodeURIComponent(keyword.value);
    window.open(url);
    return false; //阻止表单提交
    }
    else if (keyword.name == 'netease') {
    var url = 'http://t.163.com/tag/' + encodeURIComponent(keyword.value);
    window.open(url);
    return false;
    }
    else return true;
    }
    </script>
    </head><body>
    <table>
      <tr align="center" id="controller">
        <td style="background-color:#0FF" onclick="changeSearcher(this);"><a href="javascript:void(0);">百度网页</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">百度音乐</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">谷歌图片</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">新浪微博</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">网易微博</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">我的谷歌</a></td>
        <td onclick="changeSearcher(this);"><a href="javascript:void(0);">百度知道</a></td>
      </tr>
      <tr>
        <td colspan="7">
        
        <!--表单的id属性值你可以改为cse-search-box，没有任何影响，只要代码中用到该id属性值的代码处修改统一即可-->
        <form action="http://www.baidu.com/s" target="_blank" id="searcher" onsubmit="return isWeibo();">
        
          <!--不设置id属性值也无事，还是可以通过父节点很方便地找到文本框节点-->
          <input name="word" type="text" value="" />
          
          <!--增加一个隐藏域tbm，默认为禁用-->
          <input type="hidden" name="tbm" value="isch" disabled="disabled" id="tbm" />
          
          <!--下面两个隐藏域是谷歌自定义搜索需要的，默认为禁用状态-->
          <input type="hidden" name="cx" value="partner-pub-12345:67890" disabled="disabled" />
          <input type="hidden" name="ie" value="GB2312" disabled="disabled" />
          
          <!--下面两个隐藏域是百度知道搜索需要的，默认为禁用状态-->
          <input type="hidden" name="ct" value="17" disabled="disabled" />
          <input type="hidden" name="tn" value="ikaslist" disabled="disabled" />
          
          <input type="submit" value="百度一下" />
        </form></td>
      </tr>
    </table>
    天气预报：
    <iframe src="http://m.weather.com.cn/m/pn1/weather.htm " width="235" height="16" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
    </body>
    </html>
      

  4.   

    测试通过！
    谷歌代码不对，不是程序的问题。
    但是不知道为什么，好几项搜索结果后面总是出现一个多余空变量:http://mp3.baidu.com/m?word=111111&=%E7%99%BE%E5%BA%A6%E9%9F%B3%E4%B9%90
    我自己找了好几个钟头也没查到原因，似乎是45行var tbm之后和65行var buttonSubmit之间的问题。
    另外删了37行//document.getElementById('keyword').name = ar_name[obj.cellIndex];的注释，那段空变量没有了，但是好几项搜索结果又不对了~~~
      

  5.   

    可能是submit按钮name属性值设为空值引起的，第65行代码修改一下试试：
    //obj.cellIndex == 5 ? buttonSubmit.name = 'sa' : buttonSubmit.name = '';
    obj.cellIndex == 5 ? buttonSubmit.name = 'sa' : buttonSubmit.removeAttribute('name');
      

  6.   

    先结贴了：）但还有点小问题：只要点击了“我的谷歌”，那个sa变量就去不掉了，搜索别的也一直带着http://mp3.baidu.com/m?word=111&sa=%E7%99%BE%E5%BA%A6%E9%9F%B3%E4%B9%90
    怎么去掉它？
      

  7.   

    这就奇怪了，做了6楼所说的那一行的改动后，我这测试下来已经解决了sa的问题（Safari、IE8）。你用的哪个浏览器，有没有报错？
      

  8.   

    天啊，你怎么就想到浏览器上了！
    我刚用IE6、7、8和谷歌、遨游、搜狗、360、360极速这几种浏览器测试。这些语句执行的时候真的还不一样：
    IE6、7和搜狗、360这四种浏览器显示sa；IE8和谷歌、遨游360极速这四种浏览器不显示sa。
    而且显示sa的浏览器搜索“我的谷歌”，得到的网址是这样的：
    http://www.google.com.hk/cse?q=123456&cx=partner-pub-123%3A456&ie=GB2312&sa=%E6%90%9C%E7%B4%A2
    不显示sa的浏览器搜索“我的谷歌”，得到的网址是这样的：
    http://www.google.com.hk/cse?q=123456&cx=partner-pub-123%3A456&ie=GB2312&sa=搜索#gsc.tab=0&gsc.q=123456&gsc.page=1
    原来每种浏览器执行程序的结果也有差别啊？哈，长见识了！
      

  9.   

    看起来removeAttribute()方法的兼容性有点问题。按理说这个submit的name属性值对功能是完全没有影响的，但不清楚谷歌是怎么规定的。如果实在是必须的，那得找个兼容性更好的方法来实现，比如动态替换submit元素，或者放两个submit按钮，然后根据选择情况禁用一个并启用另一个，再或者用jQuery的removeAttr()方法代替，它的兼容性可能比原生的方法更好。不过为了这个name属性值增加这么多的代码是不是真的有必要啊