Запуск JavaScript в консоли браузера против букмарклета

Question

Я попытался запустить простой код для замены строк в теле страницы HTML в JS.

document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar"); 

Приведенный выше код работает отлично в консоли браузера (проверено в Firefox и Chrome), но когда я запускаю тот же через букмарклет JavaScript с префиксом javascript:, разрывов страниц, теряя все свои элементы стиля.

Мне просто интересно, почему код ведет себя по-другому, поскольку я думал, что JS-код, запущенный в консоли или через букмарклеты, будет запущен в той же среде.

Answer 1

Самый простой способ понять, что здесь происходит, это ввести javascript:"Hello world" в панель местоположения и нажать Enter. Обратите внимание, что содержимое страницы заменяется, даже если вы не коснулись DOM.

Это потому, что возвращаемое значение букмарклета передается содержимому страницы, если оно существует. И в этом случае (document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar")) оценивает новый innerHTML . Это всего лишь innerHTML тела документа, поэтому информация о stle теряется при замене всего документа HTML.

Гораздо лучше это сделать:

javascript: (function(){document.body.innerHTML = document.body.innerHTML.replace(/foo/g,"bar") }() 

, который имеет дополнительный бонус сделать все ваши var с частным. Или вы можете просто наклеить на return false; в букмарклет, как предлагал @diegog.

^{1. Не undefined, в Javascript оператор равенства возвращает значение тоже, к большому раздражению тех, кто ошибается ==.}