Я хотел бы вернуться к Fiddler. После того, как вы играете с этим некоторое время, это, безусловно, лучший способ редактировать любые веб-запросы «на лету». Быть JavaScript, POST, GET, HTML, XML и т.д. Это бесплатно, но немного сложно реализовать. Вот мой КАК-ТО:
Чтобы использовать Fiddler для управления JavaScript ( «на лету» ) с помощью Firefox, выполните следующие действия:
1) Загрузите и установите Fiddler
2) Загрузите и установите расширение Fiddler: » 3 Синтаксис-Подчеркивание надстроек»
3) Перезапустите Firefox и включите расширение FiddlerHook
4) Откройте Firefox и включите кнопку панели инструментов FiddlerHook : View > Toolbars > Customize...
5) Нажмите кнопку инструмента Fiddler и дождитесь запуска fiddler.
6) Наведите свой браузер на тестовые URL Fiddler:
Echo Service: http://127.0.0.1:8888/
DNS Lookup: http://www.localhost.fiddler:8888/
7) Добавьте Правила Fiddler, чтобы перехватить и отредактировать JavaScript до достижения браузера/сервера. В Fiddler нажмите: Rules > Customize Rules.... [Ctrl-R] Это запустит ScriptEditor.
Отредактируйте и добавьте следующие правила:
a) Чтобы приостановить JavaScript для редактирования, добавьте в функцию «OnBeforeResponse»:
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){
oSession["x-breakresponse"]="reason is JScript";
}
b) Чтобы приостановить HTTP POST, чтобы разрешить редактирование при использовании команды POST, отредактируйте «OnBeforeRequest»:
if (oSession.HTTPMethodIs("POST")){
oSession["x-breakrequest"]="breaking for POST";
}
c) Чтобы приостановить запрос на редактирование XML файла, отредактируйте «OnBeforeRequest»:
if (oSession.url.toLowerCase().indexOf(".xml")>-1){
oSession["x-breakrequest"]="reason_XML";
}
[9] TODO: отредактируйте приведенный выше CustomRules.js, чтобы отключить (a-c).
10) Загрузка браузера теперь останавливается на каждом найденном JavaScript и отображает красную паузу отметьте для каждого script. Чтобы продолжить загрузку страницы, вам нужно нажать зеленую кнопку «Запуск до завершения» для каждого script. (Вот почему мы хотели бы для реализации [9].)
HTML DOM позволяет JavaScript изменять содержимое элементов HTML.
Изменение выходного потока HTML
JavaScript может создавать динамическое HTML-содержимое:
Дата:
В JavaScript документ. Write () можно использовать для записи непосредственно в выходной поток HTML:
Пример
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
Не используйте Document. Write () после загрузки документа. Он будет перезаписывать документ.
Изменение HTML-содержимого
Самый простой способ изменить содержимое элемента HTML с помощью свойства InnerHtml .
Чтобы изменить содержимое элемента HTML, используйте следующий синтаксис:
document.getElementById(id).innerHTML = new HTML
В этом примере изменяется содержимое элемента <p>:
Пример
<html>
<body>
<p id=»p1″>Hello World!</p>
<script>
document.getElementById(«p1»).innerHTML = «New text!»;
</script>
</body>
</html>
Пример объяснил:
- HTML-документ выше содержит элемент <p> с идентификатором = «P1»
- Мы используем HTML DOM для получения элемента с идентификатором = «P1»
- JavaScript изменяет содержимое (InnerHtml) этого элемента на «новый текст!»
В этом примере изменяется содержимое элемента <H1>:
Пример
<!DOCTYPE html>
<html>
<body>
<h1 id=»id01″>Old Heading</h1>
<script>
var element = document.getElementById(«id01»);
element.innerHTML = «New Heading»;
</script>
</body>
</html>
Пример объяснил:
- HTML-документ выше содержит элемент <H1> с идентификатором = «ид01»
- Мы используем HTML DOM, чтобы получить элемент с ID = «ид01»
- JavaScript изменяет содержимое (InnerHtml) этого элемента на «новый заголовок»
Изменение значения атрибута
Чтобы изменить значение атрибута HTML, используйте следующий синтаксис:
document.getElementById(id).attribute = new value
В этом примере изменяется значение атрибута src элемента <img>:
Пример
<!DOCTYPE html>
<html>
<body>
<img id=»myImage» src=»smiley.gif»>
<script>
document.getElementById(«myImage»).src = «landscape.jpg»;
</script>
</body>
</html>
Пример:
- HTML-документ выше содержит элемент <img> с идентификатором = «MYIMAGE»
- Мы используем HTML DOM, чтобы получить элемент с ID = «MYIMAGE»
- JavaScript изменяет атрибут src этого элемента из «Smiley. gif» на «альбомная. jpg»
PHPCSSJSHMTL Editor
HTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<link rel=»stylesheet» href=»setting.css»>
<link rel=»stylesheet» href=»style.css»>
<title>FlashNews!</title>
</head>
<body class=»page light-theme»>
<header class=»page-header»>
<div class=»container»>
<a class=»header-link» href=»#»>На главную</a>
<button class=»theme-button» type=»button»>Изменить тему</button>
</div>
</header>
<main class=»inner-main»>
<div class=»container»>
<h1 class=»inner-heading»>Подпишитесь на нашу рассылку</h1>
<p class=»subscription-message»>Обещаем присылать вам новости не чаще одного раза в день, причём только самые интересные и важные.</p>
<form action=»https://echo.htmlacademy.ru/courses» method=»post» class=»subscription»>
<div class=»subscription-inner»>
<label class=»subscription-label» for=»subscription-email»>email</label>
<input type=»email» class=»subscription-email» placeholder=»keks@flashnews.ru» value=»» required id=»subscription-email»>
</div>
<button class=»button subscription-button» type=»submit»>Подписаться</button>
</form>
<section class=»news-list list-tiles-view»>
<h2 class=»news-list-heading»>Или почитайте ещё немного новостей</h2>
<article class=»new-block»>
<img src=»img/new-graph.jpg» alt=»Новая библиотека»>
<div class=»new-block-text»>
<h3>Новая библиотека для создания графиков</h3>
<p>Теперь вы можете создать дашборд за считанные секунды.</p>
<time datetime=»2019-10-16″>16 октября 2019</time>
</div>
</article>
<article class=»new-block»>
<img src=»img/new-robot.jpg» alt=»Что там у роботов?»>
<div class=»new-block-text»>
<h3>Что там у роботов?</h3>
<p>В робототехнике происходит много интересного, эта новость могла бы быть об этом, но нет.</p>
<time datetime=»2019-10-15″>15 октября 2019</time>
</div>
</article>
</section>
</div>
</main>
<footer class=»page-footer»>
<div class=»container»>
<p>© FlashNews!</p>
<a class=»footer-logo»>
<img src=»img/white-logo.svg» alt=»Логотип портала FlashNews!»>
</a>
</div>
</footer>
<script src=»script.js»></script>
</body>
</html>