Итак, ребята, я редактирую дизайн музыкального сайта для своих выступлений.
И просто хочу знать, как мне добавить ссылку на загрузку в моем скрипте пользователя?
Я подозреваю, что какой-то конфликт сценария / начальной загрузки может быть, но у меня нет знаний, чтобы отследить это: <</p>
Помните, я новичок в этом;поэтому, если что-то не совсем понятно, не стесняйтесь спрашивать: -)
Пример песни: Текст .
// ==UserScript==
// @name Bootstrap Test
// @description Why the bootstrap isnt working :<
// @author leon
// @include *://www.letras.mus.br/*/*
// @namespace http://tampermonkey.net/
// @require https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
// @require https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js
// @require http://code.jquery.com/jquery-1.11.3.min.js
// @resource bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css
// @grant GM_addStyle
// @grant GM_getResourceText
// @grant GM_getResourceURL
// ==/UserScript==
loadPage(window.location.href);
function loadPage(urlCurrent) {
var http = new XMLHttpRequest();
http.open('GET', urlCurrent, true);
http.onloadend = function () {
// Creating carousel
var carousel = document.createElement('div');
carousel.setAttribute('id', '#myCarousel');
carousel.setAttribute('class', 'carousel slide');
carousel.setAttribute('data-ride', 'carousel');
// <!-- Indicators -->
var indicators = document.createElement('ol');
indicators.setAttribute('class', 'carousel-indicators');
// <!-- Wrapper for slides -->
var inner = document.createElement('div');
inner.setAttribute('class', 'carousel-inner');
// <!-- Left and right controls -->
var controls = document.createElement('a');
controls.innerHTML = `
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
`;
// To get page elements
var html = new DOMParser().parseFromString(this.responseText, "text/html")
html = html.documentElement;
var el = html.getElementsByTagName("H1");
var content = el[el.length - 1].outerHTML + "\n";
el = html.getElementsByTagName("H2")[0];
el.innerHTML = el.innerText;
content += el.outerHTML + "\n";
content += html.getElementsByTagName("P")[0].parentElement.innerHTML
var amountParagraphs = html.getElementsByTagName("P")[0].parentElement.childElementCount;
// To create the amount of slides on the carousel
for (let i = 0; i < amountParagraphs; i++) {
if (i == 0) {
let indicator = document.createElement('li');
indicator.setAttribute('data-target', '#myCarousel');
indicator.setAttribute('data-slide-to', `${i}`);
indicator.setAttribute('class', 'active');
indicators.appendChild(indicator);
} else {
let indicator = document.createElement('li');
indicator.setAttribute('data-target', '#myCarousel');
indicator.setAttribute('data-slide-to', `${i}`);
indicators.appendChild(indicator);
}
}
// To insert all paragraphs in the carousel
for (let i = 0; i < amountParagraphs; i++) {
if (i == 0) {
let item = document.createElement('div');
item.setAttribute('class', 'item active');
item.innerHTML = `
<div class="carousel-caption">
<p>${document.getElementsByTagName("P")[i].innerHTML}</p>
</div >
`;
inner.appendChild(item);
} else {
let item = document.createElement('div');
item.setAttribute('class', 'item');
item.innerHTML = `
<div class="carousel-caption">
<p>${document.getElementsByTagName("P")[i].innerHTML}</p>
</div >
`;
inner.appendChild(item);
}
}
// Adding all the elements in the carousel
carousel.appendChild(indicators);
carousel.appendChild(inner);
carousel.appendChild(controls);
// To create bootstrap link
function cssElement(url) {
var link = document.createElement("link");
link.href = url;
link.rel="stylesheet";
link.type="text/css";
return link;
}
// To write everything in the window
document.write(`
document.head.appendChild(cssElement(GM_getResourceURL("bootstrapCSS")));
"<style>\n" +
"body { background-color:transparent; font-family:Arial, sans-serif; font-size:19px; text-align:center; word-wrap:break-word; margin:0px; }\n" +
"h1 { color: rgb(255, 102, 0); font-size: 25px; font-weight: 700; letter-spacing: -1px; margin:0px; }\n" +
"h2, a { color:rgb(183, 183, 0); font-size: 19px; font-weight: 700; letter-spacing: -1px; text-decoration: none; margin:0px; }\n" +
"p { color: rgb(68, 68, 68); font-weight: 400; line-height: 30.4px; margin-bottom: 30.4px; }\n" +
"</style>\n"
+ ${carousel}
`);
document.close();
}
http.send();
}