小编And*_*lly的帖子

托管我们网站的公司在部署之前审查我们的代码 - 他们最近告诉我们这个:

永远不应该直接操纵HTML字符串,因为这会打开我们潜在的XSS漏洞.相反,总是使用DOM api创建元素......可以是jQuery或直接DOM api.

例如,而不是

this.html.push( '<a class="quiz-au" data-src="' + this.au + '"><span class="quiz-au-icon"></span>Click to play</a>' ); 

他们告诉我们这样做

var quizAuLink = $( 'a' );
quizAuLink.addClass( 'quiz-au' );
quizAuLink.data( 'src', this.au );
quizAu.text( 'Click to play' );
quizAu.prepend( '<span class="quiz-au-icon"></span>' );

这是真的吗？任何人都可以给我们一个XSS攻击的例子,它可以像第一个那样利用HTML字符串吗？

我正在尝试使用ajax加载内容的HTML5历史API.

我有一堆通过相关链接连接的测试页面.我有这个JS,它处理这些链接的点击.当单击链接时,处理程序获取其href属性并将其传递给ajaxLoadPage(),该页面将所请求页面中的内容加载到当前页面的内容区域中.(我的PHP页面设置为在正常请求时返回完整的HTML页面,但只有一大块内容,如果？fragment = true附加到请求的URL.)

然后我的click处理程序调用history.pushState()以在地址栏中显示URL并将其添加到浏览器历史记录中.

$(document).ready(function(){

    var content = $('#content');

    var ajaxLoadPage = function (url) {
        console.log('Loading ' + url + ' fragment');
        content.load(url + '?fragment=true');
    }

    // Handle click event of all links with href not starting with http, https or #
    $('a').not('[href^=http], [href^=https], [href^=#]').on('click', function(e){

        e.preventDefault();
        var href = $(this).attr('href');
        ajaxLoadPage(href);
        history.pushState({page:href}, null, href);

    });

    // This mostly works - only problem is when popstate happens and state is null
    // e.g. when we try to go back …

我正试图在vanilla JS中进行事件委托.我有一个像这样的容器内的按钮

<div id="quiz">
    <button id="game-again" class="game-again"><span class="icon-spinner icon"></span><span>Go again</span></button>
</div>

按照David Walsh的不错说明,我正在向按钮的祖先添加一个事件处理程序,如下所示:

this.container.addEventListener('click', function(e){
    if (e.target && e.target.id == 'game-again') {
        e.stopPropagation();
        self.publish('primo:evento');
    }
});

this.container是#quiz元素.这有一半的时间,但其余的时间click事件的目标是按钮内的跨度之一,所以我的事件处理程序不会被调用.处理这种情况的最佳方法是什么？

我有一个实用程序函数,它用一个条件包装console.log,所以如果我们在dev环境中并且console.log存在,我们只调用console.log:

/* Console log if environment has debug true or #debug initially passed in URL */
metro.conlog = (function () {
    return function (message) {
        if ((metro.siteData.debug || metro.hashOptions.hasOwnProperty('debug')) && window.console && message) {
            console.log(message);
        }
    };
}());

这对于普通的控制台日志非常有效.但是我最近发现了向console.log传递多个参数的乐趣:它允许您使用字符串为控制台日志添加前缀,因此console.log('DEBUG', object)输出字符串以及可以检查其属性的可扩展对象.如何更改我的conlog功能来执行此操作？我已经尝试注销这样的所有参数:

metro.conlog = (function () {
    return function (message) {
        if ((metro.siteData.debug || metro.hashOptions.hasOwnProperty('debug')) && window.console && message) {
            console.log(arguments);
        }
    };
}());

但是这会将参数作为数组输出,而不是使用console.log获得的整齐线.您可以在此屏幕截图中看到差异:

谁能告诉我如何重现原始日志输出？

我想在我的页面上浮动一对流体div,每个占据容器宽度的一半,但它们之间的间隔为10px.我已经完成了这个JSFiddle http://jsfiddle.net/andfinally/sa53B/5/,这里是HTML:

<div class="clearfix">
    <a class="prev" href="#">Previous</a>
    <a class="next" href="#">Next</a>
</div>

和CSS:

.prev {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: left;
    box-sizing: border-box;
    width: 50%;
    margin-right: 5px;
}

.next {
    background: black;
    color: white;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    float: right;
    box-sizing: border-box;
    width: 50%;
    margin-left: 5px;
}

盒子大小规则不足以使这项工作 - div超过50%宽.在这个问题的答案之一,有人建议使用CSS display-table.任何人都可以解释如何在这种情况下做这项工作？

谢谢!

我正在为Twitter Bootstrap上构建的WordPress制作一个响应主题.我在主页上使用FlexSlider幻灯片jquery插件.

不幸的是,当我调整浏览器大小时,FlexSlider不会优雅地调整大小.当我变窄时,图像很容易被裁掉......如果我走得更宽,下一张图像的一部分可能会出现在侧面.即使我使用FlexSlider网站上的演示代码,也会发生这种情况.它甚至发生在FlexSlider演示中.但Dany Duchaine的[Energized theme] [3]设法在视口改变时很好地调整FlexSlider的大小.任何人都可以解释他是如何做到这一点,或建议我可以改善我的版本的行为？

谢谢!

我刚刚在OSX上安装了Docker Toolbox,第一次启动Docker Quickstart终端时,它促使我选择打开哪个终端.我愚蠢地选择了iTerm.现在,这些天实现了我常用的终端是终端,我想改变那个设置.但我没做什么似乎重置它.

我已经尝试再次运行Docker Toolbox的安装程序.我也尝试从https://github.com/docker/toolbox/blob/master/osx/uninstall.sh运行卸载脚本,然后重新安装.但是每次我点击Docker Quickstart终端,它都会在iTerm中启动.

谁能告诉我如何改变这种偏好？

有没有人找到任何关于Compass中output_style的不同值的含义的文档？选项包括:expanded,:nested,:compact和:compressed.我可以看到最后一个是什么,但其他人做了什么？

似乎有点浪费,我必须重新编译我的所有CSS,以弄清楚这些不同的选项产生了什么.

我正在尝试从本地API填充我的Backbone集合并更改视图以显示数据.我的集合中的fetch()调用似乎成功了,并且抓取了数据,但是fetch操作不会更新集合中的模型.

这就是我的模型和收藏品:

var Book = Backbone.Model.extend();

var BookList = Backbone.Collection.extend({

    model: Book,
    url: 'http://local5/api/books',

    initialize: function(){
        this.fetch({
            success: this.fetchSuccess,
            error: this.fetchError
        });
    },

    fetchSuccess: function (collection, response) {
        console.log('Collection fetch success', response);
        console.log('Collection models: ', this.models);
    },

    fetchError: function (collection, response) {
        throw new Error("Books fetch error");
    }

});

我已经完成了这样的观点:

var BookView = Backbone.View.extend({

    tagname: 'li',

    initialize: function(){
        _.bindAll(this, 'render');
        this.model.bind('change', this.render);
    },

    render: function(){
        this.$el.html(this.model.get('author') + ': ' + this.model.get('title'));
        return this;
    }

});

var BookListView = Backbone.View.extend({

    el: …

我正在尝试使用此类插件在JQuery中重写Mootools工具提示类.当我的类被实例化时,我将一个事件监听器附加到目标链接,这将淡出工具提示.

在事件回调中,JQuery将关键字"this"分配给事件的目标,因此要保持对我正在使用的类的属性的引用apply()将"this"设置为表示类实例.这显然是Mootools的方便bind()函数的JQuery中的对应物.

不幸的是,当我使用apply()时,我丢失了回调的事件参数.例如,在这一位,我在第二行得到"e is undefined"错误.

this.target.bind('click', function(e){
    e.preventDefault();
    var tip = this.opts.tip;
    tip.fadeOut(500, function(){
        tip.bind('click', function(){
            showing = false;
        })
    });
}.apply(this))

我在这里错过了一招吗？有没有人知道解决这个问题的方法？

谢谢Fred