Могу ли я добавить или изменить HTML-код в «Инспектировании элемента». У меня есть кнопка ссылки «Домой», которую я хочу изменить. Я использовал опцию правой кнопки мыши, но мои изменения не сохранены?
2 ответа
3
Вы не говорите, в каком браузере вы находитесь, но если это Chrome, ответ - да.
После того, как вы выбрали элемент, щелкните правой кнопкой мыши и выберите "Изменить HTML"
Тем не менее, обратите внимание, что это не сохранит веб-сайт или что-либо еще, а только отредактирует вашу локальную копию. Если вы обновите страницу, она вернется к тому, что было.
1
Как уже говорили другие, вы можете изменить ссылку, используя Inspect Element , но это изменение не будет сохранено при следующей загрузке страницы.
Если вы хотите, чтобы ссылка изменялась при каждом открытии страницы, вы можете использовать Greasemonkey или другие подобные дополнения в зависимости от того, какой браузер вы используете. (Для Firefox вы можете использовать Greasemonkey).
Вот скрипт Greasemonkey который должен делать то, что вы хотите:
// ==UserScript==
// @name Test-SU-236831-edit-link
// @namespace Test-SU
// @description Test-SU-236831-edit-link
// @include http://superuser.com/questions/236831/*
// @include http://www.superuser.com/questions/236831/*
// @version 1
// @grant none
// ==/UserScript==
var GMnode,GMelID,GMmsg="";
GMelID="nav-questions";
GMnode=document.getElementById(GMelID);
if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
GMmsg="OLD getAttribute-href="+GMnode.getAttribute("href")+"\n";
GMnode.setAttribute("href","http://www.google.com/");
GMmsg=GMmsg+"NEW getAttribute-href="+GMnode.getAttribute("href");
alert(GMmsg);
}
else{
alert("Can't find <a> element with id='"+GMelID+"'");
}
В приведенном выше сценарии есть несколько операторов "отладки", чтобы вы могли видеть, что происходит при загрузке страницы. Вот тот же сценарий без операторов "отладки":
// ==UserScript==
// @name Test-SU-236831-edit-link
// @namespace Test-SU
// @description Test-SU-236831-edit-link
// @include http://superuser.com/questions/236831/*
// @include http://www.superuser.com/questions/236831/*
// @version 1
// @grant none
// ==/UserScript==
var GMnode,GMelID;
GMelID="nav-questions";
GMnode=document.getElementById(GMelID);
if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
GMnode.setAttribute("href","http://www.google.com/");
}
В случае, если вы не знакомы с Greasemonkey , чтобы использовать вышеописанный сценарий, вам необходимо сначала установить дополнение Greasemonkey , а затем добавить указанный выше сценарий в качестве нового User Script .
Вы можете изменить @name , @namespace и @description на любые строки, которые вы хотите, чтобы уникальным образом идентифицировать User Script .
Измените поле @include на, чтобы указать URL-адрес, на который вы хотите воздействовать User Script . Вы можете иметь более одного поля @include .
Greasemonkey будет запускаться и действовать на веб-странице после того, как документ будет "Готов", то есть после загрузки всей страницы, включая <Body> и всех внешних сценариев, но до загрузки ресурсов страницы, таких как изображения и некоторые динамически загружаемые сценарии. Есть шаги, которые вы можете предпринять, чтобы убедиться, что Greasemonkey ожидает загрузки всех этих других ресурсов, прежде чем запускать ваш код. Это можно сделать, добавив eventlistener для выполнения вашего кода после события onload . В большинстве случаев в этом нет необходимости, но в случае, если это для вашей целевой веб-страницы, вот сценарий Greasemonkey для этого:
// ==UserScript==
// @name Test-SU-236831-edit-link
// @namespace Test-SU
// @description Test-SU-236831-edit-link
// @include http://superuser.com/questions/236831/*
// @include http://www.superuser.com/questions/236831/*
// @version 1
// @grant none
// ==/UserScript==
if (window.addEventListener) {
window.addEventListener('load', readytogo, false);
}
else {
if (window.attachEvent) {
window.attachEvent('onload', readytogo);
}
}
function readytogo() {
var GMnode,GMelID;
GMelID="nav-questions";
GMnode=document.getElementById(GMelID);
if((GMnode!==null)&&(GMnode.hasAttribute("href"))){
GMnode.setAttribute("href","http://www.google.com/");
}
}