Ответы пользователя по тегу JavaScript
  • Как записать текущее положение на странице в cookies?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте использовать localStorage, это более простой в использовании аналог Cookie. Можно хранить до 4 Мб информации в отличии от 4 Кб в Cookie.
    Ответ написан
    Комментировать
  • Может ли JS изменить (дописать) файл?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Да, реально. Для хранения типа данных File вы можете использовать localForage. В отличии, от localSorage, там нет ограничения на объем + файлы можно пихать напрямую, а не в виде строки. Кроме файлов, в localForage можно хранить объекты любого объема, без необходимости конвертации в JSON.
    Ответ написан
    Комментировать
  • Как прочитать, или получить доступ к сообщениям пользователя через iframe?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вы не можете смотреть переписку внутри iframe, так как внутри iframe не ваш сайт - это запрещено политикой безопасности всех без исключения браузеров. Для совершения описанной вами операции (чтение содержимого iframe из вне) необходимо чтобы содержимое iframe грузилось с вашего домена и с вашего сервера, это потребует поднятия специального реверс-прокси, что для вас будет задачей ну очень сложной.

    Но если вы уверены в своих силах, вот инструкция, пользуйтесь на здоровье:
    https://secfall.com/pryachem-sajt-za-revers-proksi...
    Ответ написан
    Комментировать
  • Почему в ajax -запросе не передаются параметры с помощью метода send?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте jQuery.ajax() для отправки формы:
    jQuery(function(){  
    
    	jQuery(".tabs").lightTabs();
    
    	jQuery('#btn').click(function(){
    		
    		var dataStart = document.getElementById('dataStart').value;
    		var dataFinish= document.getElementById('dataFinish').value;
    		var sendObj = { 'startData' : dataStart, 'finishData' :  dataFinish};
    		
    		jQuery.ajax({
    			url: 'newTable.php',
    			method: 'POST',
    			cache: false,
    			data: sendObj,
    			dataType: 'html',
    			success: function(html){
    				alert("Успех! Ответ сервера:\n" + html);
    			},
    			error: function(obj) {
    				alert('Ошибка!');
    			}
    		});
    		
    	});
      
    });
    Ответ написан
    1 комментарий
  • Как с гарантией определить, что сайт открыт на смартфоне или планшете?

    zkrvndm
    @zkrvndm Автор вопроса
    Архитектор решений
    Всем спасибо за ответы, я нашел устраивающий меня вариант, который дает 100% гарантию. Буду просто тупо вещать на body обработчик onmouseover и если обнаружена мышка над документом, считаем, что сайт с открыт с ПК и перестраиваем меню для комфортной работы именно с мышкой. Изначально же буду всегда принимать, что сайт открыт на смартфоне и меню держать в режиме работы с тачем, пока не обнаружена мышка.

    P. S. Это не сработало, увы. На смартфонах клики распознаются в том числе и как события мыши, хотя мыши нет.
    Ответ написан
    7 комментариев
  • Почему не инжектится скрипт на страницы?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вы неправильно инжектите скрипт, бэгроунд для этого вообще не нужен. Посмотрите мой пример:
    Как создать расширение для Chrome, которое блокирует доступ к сайту?
    Там внутри болванки правильный манифест. Свой же скрипт запихните в файл script.js
    Ответ написан
  • Почему при параметре атрибуте checked в checkbox при обновлении сайта форма не меняется?

    zkrvndm
    @zkrvndm
    Архитектор решений
    После загрузки страницы принудительно вызовите на вашем чекбоксе обработчик change. Это должно помочь:
    <script type="text/javascript">
      $(function() {
        $('#fluency').trigger('change');
      });
    </script>
    Ответ написан
    1 комментарий
  • Как отследить закрытие вкладки в моб. браузере?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вопрос интересный, попробуйте отслеживать на текущем окне событие потери фокуса (blur), возможно это поможет, хотя я не уверен в этом, нужны эксперименты.
    Ответ написан
    Комментировать
  • JS привязывает события к элементам один раз при построении дерева или многократно?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Если вам надо, чтобы при удалении и создании элемента заново обработчик на нем оставался, то имеет смысл тупо прописать обработчик в соответствующий атрибут. Например:
    <button onclick="alert('Проверка');">Нажми меня</button>

    Вместо onclick может любой другой обработчик: onhover, onfocus и так далее.
    Ответ написан
    Комментировать
  • Рекурсия в JavaScript?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вам помогут промисы, колбеки или функции генераторы. Генераторы кстати очень интересная вещь, особенно в связке с asunc / awat, можно целые ожерелья и цепочки последовательных вложенных вызовов функций создавать.
    Ответ написан
    Комментировать
  • Как создать расширение для Chrome, которое блокирует доступ к сайту?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вот вам болванка для запуска произвольного JavaScript-кода на страницах сайтов:
    https://yadi.sk/d/762DIB3tEgNcxw

    1. Распакуйте на рабочий стол папку Plugin
    2. Откройте браузер Google Chrome и перейдите в:
    Меню -> Дополнительные инструменты -> Расширения
    3. Включите режим разработчика в правом верхнем углу
    4. Установите расширение из ранее распакованной папки
    5. Теперь на какой-бы сайт вы не зашли в html-код сайта будет автоматиечски вставлен (и выполнен) код файла из script.js, что лежит в папке с расширением

    В файл script.js вы можете вставлять абсолютно любой код, например вы можете вставить код для проверки адреса и блокирования доступа, если адрес соответствует вашим условиям:
    if (location.href == 'https://yandex.ru') {
    	document.write('Доступ запрещен!');
    }
    Ответ написан
    Комментировать
  • Как передавать данные между разными скриптами(компонентами) в нативном js?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте localForage - это специальный драйвер для облегчения работы со встроенными браузерными базами данных. Локальные БД хороши, но у них сложный синтаксис, плюс все эти версии могут легко запутать новичка.

    В отличии от localStorage, используя localForage можно хранить практически неограниченное количество данных. При этом объекты, массивы, блобы и даже файлы можно скармливать напрямую, localForage их потом выдаст в том же виде в каком вы ему скормили - имеется в виду тип данных, ну там Object, String, Blob, File и так далее.

    Сравните два кода выполняющих одно и то же:

    Код IndexedDB:
    spoiler
    // IndexedDB.
    var db;
    var dbName = "dataspace";
     
    var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
     
    var request = indexedDB.open(dbName, 2);
     
    request.onerror = function(event) {
        // Обработка ошибок.
    };
    request.onupgradeneeded = function(event) {
        db = event.target.result;
     
        var objectStore = db.createObjectStore("users", { keyPath: "id" });
     
        objectStore.createIndex("fullName", "fullName", { unique: false });
     
        objectStore.transaction.oncomplete = function(event) {
            var userObjectStore = db.transaction("users", "readwrite").objectStore("users");
        }
    };
     
    // После того, как БД создана, добавим туда запись о пользователе
     
    var transaction = db.transaction(["users"], "readwrite");
     
    // Как-то отреагируем на окончание процесса записи в базу
    transaction.oncomplete = function(event) {
        console.log("All done!");
    };
     
    transaction.onerror = function(event) {
        // Не забываем обрабатывать ошибки
    };
     
    var objectStore = transaction.objectStore("users");
     
    for (var i in users) {
        var request = objectStore.add(users[i]);
        request.onsuccess = function(event) {
            // Выведем в консоль информацию о каждом добавленном пользователе
            console.log(event.target.result);
        };
    }


    Код localForage:
    spoiler
    // Сохраняем информацию о пользователях
    var users = [ {id: 1, fullName: 'Matt'}, {id: 2, fullName: 'Bob'} ];
    localForage.setItem('users', users, function(result) {
        console.log(result);
    });


    Синтаксис localForage отдаленно похож на localStorage, с той лишь разницей, что localForage работает асинхронно и не тормозит основной поток. Для работы с localForage можно использовать колбеки, промисы или async / await. Подробная информация с примерами доступна на гитхабе.
    Ответ написан
  • Local storage, backend и всё?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте localForage, объем данных для хранения практически не ограничен, в отличии от localStorage. При этом, объекты можно записывать напрямую, без пребразования в JSON.
    Ответ написан
    1 комментарий
  • Как вынести функцию в глобальную область видимости?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Элементарно:
    (function(){
        window.takeMeOutside = function() {
            console.log("I'm here!");
        }
    })();

    Если функцию объявить через window, то она будет объявлена глобально.

    Также можно через eval:
    window.eval('ваш код');
    Eval выполняет код из строки, в варианте выше выполняет код из строки глобально. Это может быть удобно, когда сам JavaScript-код вы грузите AJAX-ом по условию и надо потом полученный в виде обычного текста js-код запустить глобально.
    Ответ написан
  • Как из расширения для chrome изменить картинку на сайте?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте не менять атрибут src, а целиком заменить сам элемент сразу по готовности документа:
    document.addEventListener('DOMContentLoaded', function() {
    	document.querySelector('.bmenu__theme > img').outerHTML = '<img alt="Зарплаты айтишников" src="'+chrome.extension.getURL('/images/1.png')+'" style="position:relative; vertical-align: middle; top: -2px; margin-right: 4px;" width="20">';
    });

    В манифесте расширения на всякий случай укажите порядок загрузки своего скрипта:
    {
        "matches": ["https://qna.habr.com/*"],
        "css": ["style.css"],
        "js": ["script.js"],
        "run_at": "document_start"
    }

    При run_at равной document_start ваш скрипт будет запущен еще до готовности документа.
    Ответ написан
    1 комментарий
  • Как добавить валидацию типа данных?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Комментировать
  • Как перенаправить пользователя на урл с такой же вкладкой?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Вкладки могут общаться между собой посредством отслеживания события storage:

    Знаете ли вы, что localStorage запускают события? Точнее, событие возникает, когда нечто добавляется, меняется или удаляется из хранилища. Это значит, что когда вы касаетесь localStorage в любой вкладке, все остальные могут узнать об этом. Достаточно прослушивать события в объекте window:
    window.addEventListener('storage', function (event) {
      console.log(event.key, event.newValue);
    });


    Надеюсь сами догадайтесь, как это применять? Источник: https://habr.com/ru/post/250891/
    Ответ написан
  • Как скрыть label при фокусе на input?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Все проще простого. В JavaScript существуют события focus и blur, можно при наступлении этих события на конкретном элементе скрывать и показывать ваш лейбл. Пример кода с использованием данных событий в атрибутах:
    <input onfocus="document.querySelector('label[for=modal_name]').style.display = 'none';" onblur="document.querySelector('label[for=modal_name]').style.display = 'block';" type="text" name="name-form" id="modal_name">

    Код внутри onfocus выполняется при получении фокуса и делает лейбл невидимым, а код внутри onblur наоборот выполняется уже при потере фокуса и соответственно возвращает видимость.

    Если разобрать более подробно, то document.querySelector('label[for=modal_name]') ищет на странице элемент с тегом label имеющий атрибут for равный modal_name, а далее мы просто присваиваем найденному элементу тот или иной стиль: display: none или display: block в нашем случае.

    P. S. Добавлю напоследок, что код на jQuery будет короче, примерно так:
    <input onfocus="$('label[for=modal_name]').hide();" onblur="$('label[for=modal_name]').show();" type="text" name="name-form" id="modal_name">
    Ответ написан
    2 комментария
  • Можно ли узнать о переходе на другой URL в iframe?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Если фрейм с вашего же домена, то проблема элементарно решается через слушатель факта загрузки страницы:
    iframe = document.querySelector('iframe'); // Ищем фрейм
    
    // Вешаем на него слушатель:
    iframe.addEventListener('load', function() {
    	var new url = iframe.contentWindow.location.href;
    	console.log('Изменён адрес внутри фрейма: ' + url);
    });
    Ответ написан
    Комментировать
  • Как передать Cookie в хедере?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Установите куку непосредственно в самом браузере и при AJAX-запросе браузер сам передаст куку.
    https://learn.javascript.ru/cookie
    Ответ написан
    Комментировать