js提示框代码(js的三种弹出式消息提醒)

这个功能的实现主要使用了jsonp跨域访问, 然后通过回调函数来将搜索到的关联内容显示出来 。

JSONP(JSONwith Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

回调函数:当一个函数作为另一个函数的参数时,那么这个函数就是回调函数。

效果如下

js提示框代码(js的三种弹出式消息提醒)(1)

代码如下

<script type="text/javascript">      var txt = document.getElementById('text');      var oUl = document.getElementById('list');      var oBtn = document.getElementById('btn');      txt.onkeyup = function () {        oUl.innerHTML = '';        oUl.style.display = 'none';        var val = txt.value;        var oScript = document.createElement('script'); //动态创建script标签        oScript.src =          'http://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' +          val +          '&cb=callback';        //添加链接及回调函数        document.body.appendChild(oScript); //添加script标签        document.body.removeChild(oScript); //删除script标签      };      //回调函数      function callback(data) {        if (data.s && data.s.length) {          const res = data.s;          res.forEach(function (value) {            var oLi = document.createElement('li');            oLi.innerHTML =              '<a style="display:inline-block;width:100%" href="http://www.baidu.com/s?wd=' +              value +              '">' +              value +              '</a>';            oUl.appendChild(oLi);          });          oUl.style.display = 'block';        }      }      //点击跳转到百度页面,并搜索其中内容      oBtn.onclick = function () {        var val = txt.value;        location.href = 'http://www.baidu.com.cn/s?wd=' + val + '&cl=3';      };    </script>

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页