Полезности по JS

Sam Jack

Капитан-Узурпатор
Команда форума
Созидатель
5 Май 2015
13.917
4.894
113
Россия
null-prog.ru
В этой теме выкладываем все что есть полезное Вас по чистому JS (без query и пр.).
Я начну. Иногда требуется разрешить пользователю нечто делать после лайка страницы на сайте. Вот решение для vk & fb
[HIDE-POSTS=2]
Код:
<script type="text/javascript">
  VK.Observer.subscribe('widgets.like.liked', function(param) {
    alert("Был нажат лайк");
  });
</script>
<script type="text/javascript">
  window.fbAsyncInit = function() {
    FB.Event.subscribe('edge.create',
      function(response) {
        alert("Был нажат лайк");
      }
    );
  };
</script>
[/HIDE-POSTS]
 

Sam Jack

Капитан-Узурпатор
Команда форума
Созидатель
5 Май 2015
13.917
4.894
113
Россия
null-prog.ru
Вот эта штучка позволяет сделать телефон на сайте для всех устройств кликабельным и актуальным:
Код:
var deviceAgent = navigator.userAgent.toLowerCase();
    var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);
    if (!agentID) {
        $('body').on('click', 'a[href^="tel:"]', function() {
            $(this).attr('href',
                $(this).attr('href').replace(/^tel:/, 'callto:'));
        });
    }
 

Sam Jack

Капитан-Узурпатор
Команда форума
Созидатель
5 Май 2015
13.917
4.894
113
Россия
null-prog.ru
Небольшая полезность для работы с url на стороне клиента

Код:
page = {
    url : location.href.substr(8),
    page : '',
    ext : '',
    params : Array(),
  getExt : function() {
        if (this.url.substr(this.url.length - 1)=='/'){
            this.ext = '/';
        } else {
            if (this.url.indexOf('?')>0){
                this.ext = this.url.substring(this.url.lastIndexOf('.')+1, this.url.indexOf('?'));
            } else {
                this.ext = this.url.substring(this.url.lastIndexOf('.')+1);
            }
          
        }
      
        return(this.ext);
    },
    getHttp: function() {
        this.params = this.url.substr(this.url.indexOf('?')+1).split('&')
        return(this.params);
    },
    sp :  function() {
        this.params = this.url.split('/')
        return(this.params);
    }
}

Пользовать примерно так
получить расширение
Код:
page=page.getExt();
alert(page);
распарсить url по / к примеру "http://www.ya.ru/test/new/a" выдаст массив с значениями по слешам не учитывая http://
Код:
page=page.sp();
alert(page);
распарсить GET запрос
Код:
page=page.getHttp();
alert(page);
 

Sam Jack

Капитан-Узурпатор
Команда форума
Созидатель
5 Май 2015
13.917
4.894
113
Россия
null-prog.ru
ще один классный модуль снега: http://mvcreative.ru/blog/zima_na_sajte_sneg/2012-12-23-11
демо смотреть тут: http://mvcreative.ru/example/6/2/snow2.html

Добавить/удалить класс
Код:
function addClass(o, c){
    var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
    if (re.test(o.className)) return
    o.className = (o.className + " " + c).replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}
function removeClass(o, c){
    var re = new RegExp("(^|\\s)" + c + "(\\s|$)", "g")
    o.className = o.className.replace(re, "$1").replace(/\s+/g, " ").replace(/(^ | $)/g, "")
}
Кроссбраузерное добавление события к элементу:
Код:
function addEvent(elem, evType, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(evType, fn, false);
    }
    else if (elem.attachEvent) {
        elem.attachEvent('on' + evType, fn)
    }
    else {
        elem['on' + evType] = fn
    }
}
insertAfter()
простая функция, служит для добавления элемента после указанного, как следует из названия
Код:
function insertAfter(parent, node, referenceNode) {
    parent.insertBefore(node, referenceNode.nextSibling);
}
onReady() - Кроссбраузерное добавление события onDOMContentLoaded:
Код:
function bindReady(handler){

    var called = false

    function ready() { // (1)
        if (called) return
        called = true
        handler()
    }

    if ( document.addEventListener ) { // (2)
        document.addEventListener( "DOMContentLoaded", function(){
            ready()
        }, false )
    } else if ( document.attachEvent ) {  // (3)

        // (3.1)
        if ( document.documentElement.doScroll && window == window.top ) {
            function tryScroll(){
                if (called) return
                if (!document.body) return
                try {
                    document.documentElement.doScroll("left")
                    ready()
                } catch(e) {
                    setTimeout(tryScroll, 0)
                }
            }
            tryScroll()
        }

        // (3.2)
        document.attachEvent("onreadystatechange", function(){

            if ( document.readyState === "complete" ) {
                ready()
            }
        })
    }

    // (4)
    if (window.addEventListener)
        window.addEventListener('load', ready, false)
    else if (window.attachEvent)
        window.attachEvent('onload', ready)
    /*  else  // (4.1)
        window.onload=ready
    */
}

Код:
readyList = []

function onReady(handler) {

    if (!readyList.length) {
        bindReady(function() {
            for(var i=0; i<readyList.length; i++) {
                readyList[i]()
            }
        })
    }

    readyList.push(handler)
}

Использование:
Код:
onReady(function() {
  // ...
})
Полезные функции работы с Cookie в замен кривого document.cookie
Код:
// возвращает cookie если есть или undefined
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ))
    return matches ? decodeURIComponent(matches[1]) : undefined
}

// уcтанавливает cookie
function setCookie(name, value, props) {
    props = props || {}
    var exp = props.expires
    if (typeof exp == "number" && exp) {
        var d = new Date()
        d.setTime(d.getTime() + exp*1000)
        exp = props.expires = d
    }
    if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }

    value = encodeURIComponent(value)
    var updatedCookie = name + "=" + value
    for(var propName in props){
        updatedCookie += "; " + propName
        var propValue = props[propName]
        if(propValue !== true){ updatedCookie += "=" + propValue }
    }
    document.cookie = updatedCookie

}

// удаляет cookie
function deleteCookie(name) {
    setCookie(name, null, { expires: -1 })
}
 

Sam Jack

Капитан-Узурпатор
Команда форума
Созидатель
5 Май 2015
13.917
4.894
113
Россия
null-prog.ru
Добавление ссылки в Избранное:
Код:
<script>
function addBookmark(url, title){
    if (!url) url = location.href;
    if (!title) title = document.title;

    //Gecko
    if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function")) window.sidebar.addPanel (title, url, "");
    //IE4+
    else if (typeof window.external == "object") window.external.AddFavorite(url, title);
    //Opera7+
    else if (window.opera && document.createElement){
        var a = document.createElement('A');
        if (!a) return false; //IF Opera 6
        a.setAttribute('rel','sidebar');
        a.setAttribute('href',url);
        a.setAttribute('title',title);
        a.click();
    }
    else
        return false;
    return true;
}
</script>

Использование:
Код:
<a rel="sidebar" href="http://url.ua" onClick="addBookmark('http://url.ua','Название ссылки'); return false;" title="Название ссылки">Добавить в избранное</a>
Работает мало где если честно, после того как IE умер по сути, но лучше я не видел ))
 

RootVell

Moderator
Команда форума
Модер
14 Июл 2015
44
9
8
Я начну. Иногда требуется разрешить пользователю нечто делать после лайка страницы на сайте. Вот решение для vk & fb

Это про: "чтобы просмотреть ссылку нажмите на кнопки ниже" - ниже кнопки с лайками, лайк нажат - ссылка открывается, или это что-то другое ?
 

AnnaSogbrurb

Новичок
26 Авг 2021
6
0
1
34