Объект перекрестного происхождения, когда все исходит от localhost

Question

Я пытаюсь записывать каждый раз, когда пользователь изменяет ввод текста на моей веб-странице. Я использую следующее:

function formInit(socketObject) {
  $('input:text').change( (eventObject) => {
    console.log(document.domain);
    console.log(JSON.stringify($(this)));
    //... send stuff via socketObject
  });
}

, которому я звоню с $(document).ready(). Я получаю следующую ошибку в этой четвертой строке, которая записывает $ (this):

SecurityError: В доступе запрещено свойство "to JSON" для объекта перекрестного происхождения

несмотря на то, что console.log(document.domain); возвращает localhost как из сценария, так и из основного документа, из которого он вызывается. Единственное, что не обслуживается с моего flask сервера на localhost, - это несколько библиотек (jquery, socketio, cleave) и, возможно, некоторые компоненты в диаграмме боке, которые, я уверен, не квалифицируйся как input:text, и, конечно же, это не то, чем я занимался .change () в своей отладке.

Может кто-нибудь подсказать, где я ошибаюсь или где я должен искать ? Спасибо.

Answer 1

Ошибка в том, что this не является элементом input:text, как вы ожидаете, потому что вы используете функцию стрелки, поэтому лексическая область действия не поддерживается. Вам также нужно изменить функцию стрелки на анонимную функцию:

function formInit(socketObject) {
  $('input:text').change(function() {
    // 'this' now refers to the element which raised the event
  });
}

В качестве альтернативы можно сохранить функцию стрелки, но получить ссылку на элемент из события, которое вызывается и предоставляется в качестве аргумента функции-обработчика. :

function formInit(socketObject) {
  $('input:text').change(e => {
    // 'e.target' now refers to the element which raised the event
  });
}

Помимо ошибки, строковое преобразование всего объекта jQuery немного странно. Лучше вытащить только те свойства, которые вам нужны, примерно так:

function formInit(socketObject) {
  $('input:text').change((e) => {
    console.log(document.domain);
    console.log({
      id: e.target.id,
      value: e.target.value
      // other properies here...
    });

    // send stuff via socketObject...
  });
}