jQuerys draggable не работает на странице facebook (базовое понимание)

Question

при попытке проанализировать DOM-sturcture страницы facebook Я попытался реализовать Javascript-код с помощью Greasemonkey. Я включил (путем копирования/вставки) ядро ​​jQuery и пользовательский интерфейс. Я добавил через Greasemonkey код на три сайта, довольно пустой в файле, расположенном на моем ПК, а затем «instagaram» -страница (только для тестирования) и facebook. Я обозначил вставленный div толстым красным братом, я вижу его на всех трех страницах.

$('<div id="draggable2" class="ui-widget-content" style="position:absolute;border:50px solid red;top:0;left:10px;z-index:300;">text1</div>').appendTo('body'); 
$("#draggable2").click(function() {alert("pallo");}); 
$(function() { 
    $("#draggable2").draggable(); 
}); 
alert("see if jquery is still there: " + $); 

Как на тестовой странице моего ПК, так и на странице instagram div можно перетаскивать. На facebook я получаю «предупреждение», вызванное jQuerys .click-Funktion («pallo» в этом случае). Но консоль ошибок FF говорит на Facebook-странице:

TypeError: $(...).draggable is not a function 

Как Facebook может отключить функцию перетаскивания? Учитывая this article here я попробовал:

jQuery.noConflict(); 
jQuery(function() { 
    jQuery("#draggable2").draggable(); 
}); 

FF все еще говорит (на facebook-странице), что jQuery.draggable() не является функцией.

Любые идеи о том, как Facebook «убивает» функциональность jQuery-draggable? Или я думаю или проверяю что-то не так? Это вопрос больше о «понимании» технологий за шторами.

Answer 1

Для устранения неполадок и как сделать поиск неисправностей здесь:

Глядя на DOM из Facebook, уже есть переменная объявлена ​​как $ в моей не-взломано вверх окружающей среде, и, вероятно, это то, что $ еще представляет в вашем. Мониторинг переменной и выяснение, будет ли $ быть перезаписанным, измененным, измененным и т. Д., Вероятно, будет поворотным поворотом и сожалением.

На данный момент, вероятно, этого достаточно, чтобы просто знать, что $ существует в Facebook уже, а затем работает над игровым планом, чтобы делать то, что вы хотите сделать с этими знаниями. Вы можете открыть консоль своего браузера в FireFox, нажав Ctrl+shift+k и просто введите $, чтобы он зарегистрировался на консоль, что такое $.

Для решения задачи:

Проблема здесь, скорее всего, связано с объема в Greasemonkey. Ваша цель, вероятно, следует ввести JQuery в пределах вашего сценария GM, а не в пределах окна, так что надеюсь, это то, как вы добавляете в Jquery файлы:

// @require  https://etc.etc.etc/jquery.min.js 
// @require  https://etc.etc.etc/jquery-ui.min.js 

... 

this.$ = this.jQuery = jQuery.noConflict(true); 

//remainder of code to insert things 

Что-то, как это будет гарантировать, что в рамках вашего сценария Greasemonkey, $ относится к jQuery и jQuery-ui, а Facebook может продолжать играть с любым своим $. :)