Ответы пользователя по тегу JavaScript
  • Как добраться до внука iframe?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Не слушайте комментаторов выше. Добраться до содержимого фрейма вполне возможно, для требуется соблюсти лишь одно условие: чтобы фрейм грузился с вашего же сайта.
    Ответ написан
    Комментировать
  • FormData отправляется в AXIOS, но FETCH не работает, как отправить через fetch?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Когда вы добавляйте файл в FormData вы должны третьим параметром передавать имя файла, чего я у в вас не наблюдаю.
    Ответ написан
  • Почему jquery возвращает undefined?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Событие DOMSubtreeModified морально устарело и не поддерживается более браузерами.
    Если вам нужна реакция на изменение страницы, то вы должны использовать наблюдателей.

    Делается это примерно так:
    // При клике на кнокпу выполняем функцию:
    
    $('#employee_avatar_button').click(function(){
    	
    	// Создаем наблюдателя, переданная функция будет
    	// выполнятся всякий раз при изменении страницы:
    
    	var observer = new MutationObserver(function() {
    		
    		// Ищем нужный нам элемент:
    		var el = $('#employee_avatar_ul li::last-child');
    		
    		// Если элемент найден:
    		
    		if (el.length > 0) {
    			
    			// Откл. наблюдателя:
    			observer.disconnect();
    			
    			// Выводим уведомления:
    			
    			console.log('Найден элемент:');
    			console.dir(el[0]);
    			
    			console.log('Его атрибут file_id: ' + el.attr('file_id'));
    			
    		}
    		
    		// Если элемента еще нет:
    		
    		else {
    			
    			// Выводим соотвествующее уведомление:
    			console.log('Обнаружено изменение содержимого тега <body></body> - однако элемент, который мы ждем, пока еще отсуствует на странице.');
    			
    		}
    		
    	});
    
    	// Прикрепляем наблюдатель к body:
    
    	observer.observe(document.body, {
    		characterData: true,
    		attributes: true,
    		childList: true,
    		subtree: true
    	});
    
    });

    Почитать подробнее можно здесь: https://learn.javascript.ru/mutation-observer
    Ответ написан
    Комментировать
  • Как организовать автозапуск видео со звуком на сайте?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Это невозможно, пока пользователь куда-нибудь не кликнет. Если будет хотя бы один клик, то вот под него уже можно подставить кнопку плей от видео.
    Ответ написан
  • Как передать "значение" в javascript?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Разместите на странице следующий html-код:
    <script>
    
    	// Ждем готовности документа и запускаем функцию titleRename:
    
    	document.addEventListener('DOMContentLoaded', titleRename);
    
    	// Функция для изменения титула страницы:
    
    	function titleRename() {
    		
    		// Ищем элемент h1 и записываем ссылку на него в переменную h1_element:
    		
    		var h1_element = document.querySelector('h1');
    		
    		// Если в переменной h1_element что-нибудь есть:
    		
    		if (h1_element) {
    			
    			// Читаем из h1_element только текст и записываем в переменную h1_text:
    			
    			var h1_text = h1_element.innerText;
    			
    			// Ищем элемент title и внуть него записываем текст из переменной h1_text:
    			
    			document.querySelector('title').innerHTML = h1_text;
    			
    		}
    		
    	}
    
    </script>

    После двойного слеша идут комментарии, если какой-то из методов вам непонятен, просто загуглите.

    Например, изучите для начала как работает document.querySelector()
    Ответ написан
  • Как сделать конвертацию с JQuery в JavaScript?

    zkrvndm
    @zkrvndm
    Архитектор решений
    jQuery как бы и так написан на JavaScript и не нуждается в конвертации)
    Ответ написан
  • Как я могу запустить скрипт полученный через fetch?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте вот так:
    async function getScript() {
    	try {
    		var response = await (await fetch('/index.php?route=product/compare/add', { method: 'POST', body: data })).json();
    		var doc = new DOMParser().parseFromString(reponse.tpl, 'text/html');
    		var code = doc.querySelector('script').innerHTML; eval(code);
    		console.log("Следующий скрипт успешно выполнен:\n" + code);
    	} catch(err) {
    		alert('При загрузке скрипта произошла ошибка, детали см. в консоли.');
    		console.log('При загрузке скрипта произошла ошибка:');
    		console.error(err);
    	}
    }
    
    getScript();

    Однако может не заработать, так как не понятно, что именно вы пытайтесь отправить в переменной data.
    Ответ написан
  • Почему при умножении появляется большой "хвост"?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Перед умножением дробей, нужно всегда приводить их к целому числу, тогда таких проблем не будет.
    Ответ написан
    Комментировать
  • Как сохранить динамически созданный элемент в базу данных и выводить на html-страницу?

    zkrvndm
    @zkrvndm
    Архитектор решений
    После загрузки страницы AJAX-ом стучитесь на сервер и забираете массив ссылок из базы данных. Далее, полученный массив ссылок обходите циклом и вставляете на страницу в виде фреймов.
    Ответ написан
    Комментировать
  • Как предотвратить повторную отправку формы через enter?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Заведите переменную для записи состояния - отправлено / не отправлено. Перед отправкой формы используя банальный if проверяйте состояние этой переменной и отправляйте форму только, если она не отправлялась ранее.
    Ответ написан
  • Как исправить "No 'Access-Control-Allow-Origin' header is present on the requested resource"?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Access-Control-Allow-Origin должен прописать сайт на который вы делайте запрос, а не вы) Но так как ВК разумеется ничего прописывать не будет, то вам нужно проксировать запросы через свой сервер.

    Логика:
    1. Вы делайте запрос на свой сервер
    2. Ваш сервер делает запрос в ВК
    3. Результат запроса отдает вам
    Ответ написан
    Комментировать
  • AJAX-запрос на загрузку новой страницы?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Ниже пример функции для загрузки страниц по AJAX, без перезагрузки страницы:
    async function pageUpdate(event) {
    	
    	// Если функция вызвана без аргументов:
    	
    	if (typeof event == 'undefined') {
    		
    		// Устанавливаем обработчики
    		// на все ссылки на странице:
    		
    		$('a[href]').click(pageUpdate);
    		
    	}
    	
    	// Если функция вызвана
    	// в результате клика
    	// по ссылке:
    	
    	else {
    		
    		// Берём адрес с нажатой ссылки
    		// и записываем в переменную link:
    		
    		var link = event.target.href;
    		
    		// Если ссылка ведет на наш сайт:
    		
    		if (link.includes(location.host)) {
    			
    			// Предотвращаем переход:
    			
    			event.preventDefault();
    			
    			// Блокируем страницу, чтобы
    			// больше нельзя было кликать:
    			$('body').css('pointer-events', 'none');
    			
    			// Активируем анимацию
    			// постепенного исчезновения
    			
    			await $('body').animate({ opacity: 0 }, 1000).promise();
    			
    			// Грузим новую страницу AJAX-ом без
    			// фактической перезагрузки текущей:
    			
    			var html = await $.ajax(link);
    			var doc = new DOMParser().parseFromString(html, 'text/html');
    			var html = $('body', doc).html();
    			history.pushState(null, null, link);
    			$('body').html(html);
    			
    			// Заново ставим
    			// обработчики:
    			
    			pageUpdate();
    			
    			// Активируем анимацию
    			// постепенного появления:
    			
    			await $('body').animate({ opacity: 1 }, 1000).promise();
    			
    			// Снимаем блокировку с документа:
    			
    			$('body').css('pointer-events', '');
    			
    		}
    		
    	}
    	
    }
    
    pageUpdate();

    Функция перехватывает клики по ссылкам, добавляет анимацию и обновляет контент страницы без перезагрузки.
    Ответ написан
    8 комментариев
  • Существует ли популярный JavaScript UI, который можно использовать без Vue.js, на "чистом" JS или JQuery?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Рекомендую попробовать Uikit, начиная с третьей версии они отказались от jQuery, теперь у них все на чистом JavaScript. Дополнительным плюсом является наличие подробной документации на Русском языке с кучей примеров.

    https://3uikit.ru
    Ответ написан
    1 комментарий
  • Не устанавливается куки на все страницы сайта?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Когда вы ставите куку, надо указывать, что ставите на весь сайт.

    Вообще, для облегчения работы с куками существуют плагины специальные, используйте их и не ***** себе мозги.

    https://github.com/js-cookie/js-cookie
    Ответ написан
  • Как получить return из ajax запроса?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Используйте async / await - это наиболее просто и удобный способ.

    Пример:
    $('.post-like').click(async function(){
    	
    	var response = await $.ajax({
    		url: '/ajax/post_like.php',
    		type: 'POST',
    		dataType: 'json',
    		data: {
    			action: 'check',
    			post_id: $(this).parents('.item').attr('id')
    		}
    	});
    	
    	if (response.already_vote == 1) {
    		alert('Еденица!');
    	} else {
    		alert('Не еденица!');
    	}
    	
    });
    Ответ написан
    Комментировать
  • Как добавить на сайт цену золота в рублях?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Берете любой другой сайт, где эта информация уже есть, парсите ее и выводит у себя. Для париснга можете использовать библиотеку PHPQuery.
    Ответ написан
    Комментировать
  • Можно ли создать сайт только на JavaScript?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Разумеется можно) Но данные которыми оперирует JavaScript нужно где-то хранить.

    Вариантов тут два:
    1. Поднять свой собственный сервер на NodeJS и там организовать API для доступа к данным
    2. Использовать готовы сервисы, которые предоставляют вам свое собственное API за умеренную плату:
    JAMstack — подход для создания статических сайтов. Он включает в себя JavaScript, API и разметку. При использовании такого подхода, разработчики используют JavaScript для взаимодействия пользователя с контентом, API в качестве источника информации.... Метод отличается от традиционного применения CMS отсутствием необходимости задействовать веб-сервер для фронтенда.
    Ответ написан
    Комментировать
  • Как с jQuery метод .clone(true) переписать на чистый JS?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте так:
    var clone = document.querySelector('selector').cloneNode(true);
    document.body.appnedChild(clone);

    Скопирует и вставит в конце страницы элемент с указанный селектором.
    Ответ написан
  • Как отправить массив через ajax?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Попробуйте мой вариант:
    // Функция для преобразования объекта
    // в строку формата x-www-form-urlencoded:
    
    function httpBuildQuery(object_to_convert) {
    	
    	var params = new URLSearchParams();
    	
    	var paramsGenerator = function(parent_key, iterate_object) {
    		
    		for (var current_key in iterate_object) {
    			
    			if (typeof iterate_object[current_key] == 'string' || typeof iterate_object[current_key] == 'number') {
    				
    				if (parent_key.length > 0) {
    					var property_path = parent_key + '[' + current_key + ']';
    				} else {
    					var property_path = current_key;
    				}
    				
    				params.append(property_path, iterate_object[current_key]);
    				
    			} else if (typeof iterate_object[current_key] == 'object') {
    				
    				if (parent_key.length > 0) {
    					var property_path = parent_key + '[' + current_key + ']';
    				} else {
    					var property_path = current_key;
    				}
    				
    				paramsGenerator(property_path, iterate_object[current_key]);
    				
    			}
    			
    		}
    		
    	}
    	
    	paramsGenerator('', object_to_convert);
    	
    	return params.toString();
    	
    }
    
    // Протестируем работу функции на примере:
    
    var test_object = {
    	'raz' : 'Первое свойство',
    	'dva' : 'Второе свойство',
    	'tri' : {
    		'test' : 'Тест',
    		'proverka' : 'Проверка',
    		'massiv' : [
    			'aaa',
    			'bbb',
    			'ccc',
    			{
    				'lalala' : 'lololo',
    				'tratata' : 'trototo'
    			},
    			123,
    			345,
    			567
    		]
    	}
    };
    
    var send_string = httpBuildQuery(test_object);
    
    var response = await (await fetch('/NewAdvert', {
    	method: 'POST',
    	headers: {
    		'Content-Type' : 'application/x-www-form-urlencoded'
    	},
    	body: send_string
    })).text();
    
    console.log(response);

    Вставьте это в консоли.
    Ответ написан
    Комментировать
  • Как правильно слушать порт в расширении хрома?

    zkrvndm
    @zkrvndm
    Архитектор решений
    Каждую секунду отправляйте из контент-скрипта сообщение в фоновый процесс:
    chrome.extension.sendMessage('Ваше сообщение');

    В фоновом процессе слушайте приходящие сообщения:
    chrome.extension.onMessage.addListener(function(message) {
    	console.log('Принято сообщение: ' + message);
    });

    Если связь с определенной вкладкой потеряна, пересоздаете его или обновляйте.

    P. S. Существуют и иные способы предотвратить заморозку вкладки, если интересно, расскажу.
    Ответ написан