如何利用charles设置自己的html可以放在某个域名下

最新推荐文章于 2025-03-27 21:03:58 发布

置顶王大锤子呦

最新推荐文章于 2025-03-27 21:03:58 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 文章标签： charles chrome 服务器代理

本文链接：https://blog.youkuaiyun.com/darongzi1314/article/details/52636020

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文设计到的charles的安装和使用请参考这篇博文：http://blog.youkuaiyun.com/darongzi1314/article/details/52635925：

其中涉及到的最重要的内容就是MapLocal的使用：

修改服务器返回内容

有些时候我们想让服务器返回一些指定的内容，方便我们调试一些特殊情况。例如列表页面为空的情况，数据异常的情况，部分耗时的网络请求超时的情况等。如果没有 Charles，要服务器配合构造相应的数据显得会比较麻烦。这个时候，使用 Charles 相关的功能就可以满足我们的需求。

根据具体的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能，都可以达到修改服务器返回内容的目的。这三者在功能上的差异是：

Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
Rewrite 功能适合对网络请求进行一些正则替换。
Breakpoints 功能适合做一些临时性的修改。

Map 功能

Charles 的 Map 功能分 Map Remote 和 Map Local 两种，顾名思义，Map Remote 是将指定的网络请求重定向到另一个网址请求地址，Map Local 是将指定的网络请求重定向到本地文件。

在 Charles 的菜单中，选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面。

可以用下面这段代码做测试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--规范视图-->
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <title>bing search</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <script src="jquery-1.11.2.min.js"></script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #333;
        }
        .bg-div{
            position: relative;
            width: 1228px;
            height: 690px;
            /*在IE里不居中*/
            margin: 0 auto;
            background-image: url("image/river.jpg");
        }
        .logo{
            background-image: url("image/logo 2.png");
            width: 107px;
            height: 53px;
            float: left;
            margin: -4px 18px 0 0;
        }
        form{
            float: left;
            background-color: #ffffff;
            padding: 5px;
        }
        .search-input-text,.search-input-button{
            border: none;
            float: left;
        }
        .search-input-text{
            width: 350px;
            height: 29px;
            line-height: 29px;
            /*取消选中时的边框蓝色*/
            outline: none;
        }
        .search-input-button{
            background-image: url("image/search-button.png");
            width: 29px;
            height: 29px;
            /*取消选中时的边框蓝色*/
            outline: none;
            /*鼠标滑过变为小手*/
            cursor: pointer;
        }
        .search-box{
            position: absolute;
            top:200px;
            left: 300px;
        }
        .suggest{
            /*position: absolute;*/
            /*top: 100px;*/
            /*left: 100px;*/
            background-color: #ffffff;
            width: 388px;
            border: 1px solid #cccccc;
            display: none;
        }
        .suggest ul li{
            font-size: 14px;
            line-height: 25px;
            cursor: pointer;
        }
        .suggest ul li:hover{
            text-decoration: underline;
            background-color: #e5e5e5;
        }
    </style>
</head>
<body>

<div class="bg-div">
    <div class="search-box">
        <div class="logo"></div>
        <form id="search_form">
            <input class="search-input-text" type="text" id="search_input" placeholder="">
            <input class="search-input-button" type="submit" id="" value="">
        </form>
    </div>
</div>

<div class="suggest" id="search-suggest">
    <ul id="search-result">
        <li>搜索结果1</li>
        <li>搜索结果2</li>
        <li>搜索结果3</li>
        <li>搜索结果4</li>
        <li>搜索结果5</li>
    </ul>
</div>

<script type="text/javascript">
    $('#search_input').bind('keyup',function () {
        var searchText=$('#search_input').val();
        $.get('http://api.bing.com/qsonhs.aspx?q='+searchText,function (d) {
            var d=d.AS.Results[0].Suggests;
            var html='';
            for (var i=0;i<d.length;i++){
                html+='<li>'+d[i].Txt+'</li>'
            }
            $('#search-result').html(html);
            $('#search-suggest').show().css({
                //取到距离浏览器上面的位置
                top:$('#search_form').offset().top+$('#search_form').height()+10,
                left:$('#search_form').offset().left,
                position:'absolute'
            });
        },'json');
    });
    //点击浏览器的任何一个位置的时候
    $(document).bind('click',function () {
        $('#search-suggest').hide();
    });
    //点击搜索结果跳页面
    //事件代理
    $(document).delegate('li','click',function () {
        //页面的跳转
        var keyword=$(this).text();
        location.href='http://cn.bing.com/search?q='+keyword;
    });
</script>

</body>
</html>