使用Javascript在live网站上创建测试环境_Javascript_Jquery_Html_Testing_Environment

使用Javascript在live网站上创建测试环境

javascript jquery html testing

使用Javascript在live网站上创建测试环境,javascript,jquery,html,testing,environment,Javascript,Jquery,Html,Testing,Environment,我目前在Salesforce桌面平台的后端工作，尝试编写依赖于代码的下拉菜单。它们使用所谓的案例主题，基本上呈现客户端接口页面的布局。问题是，当我创建自己的测试用例主题时，如果不发布它并使其生效，我就无法预览它我的问题是，如果我使用Javascript根据参数值创建一个条件，这是否是一种有效的方式来发布一个实时主题，而不会弄乱前端视图/功能 <body>  <div class="test_wrap

我目前在Salesforce桌面平台的后端工作，尝试编写依赖于代码的下拉菜单。它们使用所谓的案例主题，基本上呈现客户端接口页面的布局。问题是，当我创建自己的测试用例主题时，如果不发布它并使其生效，我就无法预览它

我的问题是，如果我使用Javascript根据参数值创建一个条件，这是否是一种有效的方式来发布一个实时主题，而不会弄乱前端视图/功能

<body>
<!-- Okay to Edit - Test Area -->
<div class="test_wrapper">
    <div class="test_header">
        <h1>DEVELOPMENT MODE</h1>
    </div>
    <hr>
    <div class="test_body">
        <h2>Development Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetur </p>
    </div>
    <hr>
    <div class="test_footer">
        <h2>Development Header</h2>
        <p>Voluptate necessitatibus inventore explicabo blanditiis veniam odio.</p>
        <div id="test_button">Click</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elitinventore eligendi.</p>
        <br>
        <h2>Development SubSubHeading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur quis veritatis.</p>
    </div>
    <script>
        $('#test_button').click(function(){
            alert('You are currently in Test Mode');
        });
    </script>
</div>
<!-- End Test Area -->

<!-- Don't Touch - Live Area -->
<div class="live_wrapper">
    <div class="live_header">
        <h1>Live Mode</h1>
    </div>
    <hr>
    <div class="live_body">
        <h2>Live Subheading </h2>
        <p>Lorem nis placeat vitae in qui iste laborum sequi ea.</p>
        <p>Lorem delectus possimus ipsam ex, doloribus placeat. Perspiciatis.</p>
    </div>
    <hr>
    <div class="live_footer">
        <h2>Live Subheading </h2>
        <p>Lorem veniam tempore provident minima, consequuntur. Qui iure blanditiis veniam odio.</p>
        <div id="live_button">Click</div>
        <p>Lorem vero illum necessitatibus iste rem pariatur quos autem inventore eligendi.</p>
        <br>
        <h2>Live SubSubHeading </h2>
        <p>Lorem tus porro eligendi autem optio facilis quis veritatis.</p>
    </div>
    <script>
        $('#live_button').click(function(){
            alert('You are currently in Live Mode');
        });
    </script>
</div>
<!-- End Live Area -->
<script>
    $(document).ready(function(){
        if (window.location.search.indexOf('mode=test') > -1) {
            $('.live_wrapper').hide();
            $('.test_wrapper').css('display', 'block');
            } else {
            $('.test_wrapper').hide();
            $('.live_wrapper').css('display', 'block');
        }
    });
</script>


发展模式

开发标题
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图

开发标题
发明者解释说，这是一种需要
点击
Lorem ipsum Door sit amet，是一位杰出的发明家eligendi


发展副标题
这是一个真理
$（“#测试按钮”）。单击（函数（）{
警报（“您当前处于测试模式”）；
});
现场模式

活副标题
在实验室里的简历上写着
不可剥夺的权利，不可剥夺的权利。透视术

活副标题
Lorem veniam暂时性最低公积金，Consequintur。这是一个很好的例子
点击
Lorem vero illum Essentialtibus是我们的发明者eligendi


活子标题
这是一种真实的视觉
$（“#live_按钮”）。单击（函数（）{
警报（“您当前处于实时模式”）；
});
$（文档）.ready（函数（）{
if（window.location.search.indexOf（'mode=test'）>-1）{
$（'.live_wrapper'）.hide（）；
$（'.test_wrapper'）.css（'display'，'block'）；
}否则{
$（'.test_包装器'）.hide（）；
$（'.live_wrapper'）.css（'display'，'block'）；
}
});

如您所知，除非URL具有

？mode=test

，否则应呈现实时代码。有人能指出这样做的危险/缺点吗？

我只想使用CSS（在要隐藏的容器上使用display:none）。使用查询参数的唯一缺点是，如果用户尝试，他们可以查看您的测试HTML。如果这不是问题，那就去做吧

只要确保你不暴露任何有人可以利用的API。

正如Dark Falcon在评论中所说，它将在等待JavaScript启动时短暂显示。我建议在JS在测试模式中添加的body标记中添加一个类，然后您可以执行以下操作：

body.test .live_wrapper {
   display: none;
}
body.test .test_wrapper {
   display: block;
}
body .live_wrapper {
   display: block;
}
body .test_wrapper {
   display: none;
}

在将主体类设置为“test”之前，这基本上将实时模式设置为默认模式

当然，除非您计划在这些代码之间进行动态更改，否则最好使用服务器端代码打开或关闭这些代码，假设您使用的是服务器端代码。

您可能希望使用内嵌CSS隐藏

test\u wrapper

，或者它可能在JS运行之前短暂显示。这一点很好！我真的很怀疑是否有人会试图改变URL以确定是否存在测试模式，但仍然感谢您指出这一点。我知道我不能太确定其他人在那里试图做什么。。。

if (window.location.search.indexOf('mode=test') > -1) {
   $('body').addClass('test');
}