Нажмите кнопку программно - JS
Я видел это в других веб-приложениях, но я довольно новичок в Javascript и не могу понять это самостоятельно. Я хочу, чтобы Google Hangouts был создан программно. Тем не менее, в официальном API единственный способ создать видеовстречу - это включить кнопку Hangouts на вашей странице.
Здесь находится документ Google в Hangouts.
Я хочу сделать, чтобы пользователь нажал кнопку img другого пользователя и таким образом открыл видеовстречу. Кажется, я мог захватить этот клик, а затем 'click' кнопку Hangouts в фоновом режиме. Тем не менее, я не очень хорошо разбираюсь в Javascript, поэтому я не знаю, как добиться этого.
ИЗМЕНИТЬ
Я попробовал решение mohamedrais ниже, не повезло. Это как-то связано с классом кнопки?
Здесь код кнопки, взятый из документов Hangouts с добавленным id
:
<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div class="g-hangout" id="hangout-giLkojRpuK"
data-render="createhangout">
</div>
Здесь JS я добавил, с помощью id
s:
<script>
window.onload = function() {
var userImage = document.getElementById("img-giLkojRpuK");
var hangoutButton = document.getElementById("hangout-giLkojRpuK");
userImage.onclick = function() {
console.log("in onclick");
hangoutButton.click(); // this will trigger the click event
};
};
</script>
Когда я нажимаю кнопку img
, "в onclick" регистрируется, поэтому функция вызывается. Однако ничего не происходит - Hangouts не запускается.
Когда я нажимаю прямо на кнопку Hangouts, он запускает Hangouts. Тем не менее, я хочу, в конце концов, скрыть это и выполнить щелчок с изображения.
Здесь изображение кнопки Hangouts выше img
:
![enter image description here]()
Ответы
Ответ 1
window.onload = function() {
var userImage = document.getElementById('imageOtherUser');
var hangoutButton = document.getElementById("hangoutButtonId");
userImage.onclick = function() {
hangoutButton.click(); // this will trigger the click event
};
};
это сделает трюк
Ответ 2
Хотя этот вопрос довольно старый, вот ответ:)
То, о чем вы просите, может быть достигнуто с помощью jQuery . click() метод событий
и . on() метод событий
Таким образом, это может быть код:
// Set the global variables
var userImage = $("#img-giLkojRpuK");
var hangoutButton = $("#hangout-giLkojRpuK");
$(document).ready(function() {
// When the document is ready/loaded, execute function
// Hide hangoutButton
hangoutButton.hide();
// Assign "click"-event-method to userImage
userImage.on("click", function() {
console.log("in onclick");
hangoutButton.click();
});
});
Ответ 3
Я никогда не развивался с HangOut. Я столкнулся с теми же проблемами с FB-login, и я так старался заставить его щелкнуть программно. Затем я обнаружил, что sdk не позволит вам программно нажать кнопку из-за некоторых соображений безопасности. Пользователь должен физически щелкнуть по кнопке. Это также происходит с кнопкой async asp fileupload. Поэтому, пожалуйста, проверьте, разрешает ли HangOut программный щелчок по кнопке. Все вышеперечисленные коды верны, и они должны работать.
Если вы копаете достаточно глубоко, вы увидите, что мой ответ - правильный ответ для вашей ситуации.
Ответ 4
Вы понимаете, что такое обработчик событий? Это функция. Вы понимаете, что делает браузер, когда он вызывает эту функцию? Он отправляет единственный объект "Событие" в качестве единственного аргумента. Вы понимаете, что такое объект события? Различные браузеры могут незначительно отличаться, но по существу они просто объект, чья "цель" является ссылкой DOM на какой-то элемент, который какой-то пользователь сделал что-то.
Если цель состоит в том, чтобы сделать что-то программно, тогда обычно вам будет только интересно, что произошло ЧТО-ТО, а не детали ЧТО, и вы уже знаете, где это произошло, и КАК МНОГИЕ. Таким образом, вы можете полностью игнорировать событие и попробовать вручную вызвать обработчик событий: handleFoo( );
.
Если вам действительно нужно свойство target, просто возьмите ссылку DOM с помощью document.getElementById( 'someId' )
и передайте это? Так что-то вроде:
var elem = document.getElementById( 'foo' );
handleFoo( { target: elem } );
Хорошо, возможно, API строго соблюдает и проверяет цепочку instanceof
или прототипа. Но даже тогда, даже если у вас нет конструктора new MouseEvent( 'click' );
, почему бы просто не написать его? В нем вы вручную играете со всеми предметами создания объектов, используя Object.create? То есть установите __prototype__
в MouseEventPrototype
и убедитесь, что вы глубоко копируете столько свойств из целевого браузера (ов), сколько необходимо для проверки любого API? Я сомневаюсь, что API выполняет некоторую тщательную проверку, чтобы гарантировать достоверность, или действительно, если API может даже обнаружить такую вещь.
Если браузер сам предотвращает создание похожих объектов, возможно, перехватит и сохранит ссылку на какой-либо другой подобный объект события, измените, какие свойства вам нужны, если таковые имеются, и передайте это вместе? Браузер может также предотвратить это с помощью свойств только для чтения?
Если какая-то библиотека, подобная jQuery, может это сделать, то они доказали, что это возможно. jQuery - это не какая-то повышенная магия. Это просто JavaScript, который кто-то набрал, так же, как вы печатаете самостоятельно. Просто просмотрите их код и определите технику, которую они используют, и сделайте что-нибудь подобное?
Если мы все закончим здесь и ничего не работаем, тогда хорошо, тогда я застрял, и браузер заблокировал безопасность в разумной степени.;)