Мое требование состоит в том, что мне нужно включить / включить JavaScript на каком-то сайте. Хорошо, но когда я сохраняю JavaScript Включить на Chrome сайте, мой another JS (this PopUp on selection)
не работает, но когда я отключаю / блокирую все JS для того же сайта всплывающий скрипт работает. Почему? Скорее я хочу на JS.
Теперь я хочу использовать этот всплывающий скрипт на веб-странице, когда все остальные JS включены, как это сделать?
Но здесь моя проблема в том, что когда все остальные JS включены, это всплывающее окно не работает
Итак, Plz Any Body может решить мою проблему, многие, благодаря им, продвинулись вперед.
Код моей всплывающей функции:
const container2 = document.querySelector('#article_body');
const popupContainer = document.querySelector('.popupContainer');
// this method is added
// It gives the text of HTML of selected text :)
function getHTMLOfSelection () {
var range;
if (document.selection && document.selection.createRange) {
range = document.selection.createRange();
return range.htmlText;
}
else if (window.getSelection) {
var selection = window.getSelection();
if (selection.rangeCount > 0) {
range = selection.getRangeAt(0);
var clonedSelection = range.cloneContents();
var div = document.createElement('div');
div.appendChild(clonedSelection);
return div.innerHTML;
}
else {
return '';
}
}
else {
return '';
}
}
container2.addEventListener('mouseup', (e) => {
const selectedText = getHTMLOfSelection(); // First get the raw HTML text
if (selectedText) {
//selectedText.split("<").join("<"); // Now replacing the < so that browser don't render it
//selectedText.split(">").join(">"); // Also replacing the > so that browser don't render it
//console.log(selectedText);
showPopup(selectedText); // using the 'xmp' tags around the text, to show2 the html as it is
}
});
popupContainer.addEventListener('click', (event) => {
if (event.target.matches('.popupContainer')) {
popupContainer.classList.remove('show2');
}
});
function showPopup(selectedText) {
// set the selected text as html inside popup2 element
document.querySelector('.popup2').innerHTML = selectedText;
popupContainer.classList.add('show2');
}
.popupContainer {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
top: 0;
display: flex;
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
align-items: center;
justify-content: center;
color: red;
z-index: 1;
overflow: scroll;
font-family: Kohinoor Devanagari;
box-shadow: inset -17px -6px 20px 20px #0c3f41, 0 0 25px blue, 0 0 5px darkblue;
}
.show2 {
opacity: 1;
pointer-events: all;
}
.popup2 {
background: #fff;
padding: 10px;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
width: 80%;
transition: transform 0.4s cubic-bezier(.39,.575,.565,1.000);
-webkit-transform: scale(.5);transform:scale(.5)
}
.show2 .popup2 {
-webkit-transform: scale(1);transform:scale(1)
}
<div class="popupContainer"><div class="popup2"></div></div>
<div id="article_body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae pariatur eos aperiam saepe, beatae necessitatibus exercitationem, nemo, sit provident possimus debitis modi eligendi repellat iure vitae perferendis? Recusandae accusamus placeat velit itaque quis fuga laudantium debitis, ab eaque voluptatum illo esse incidunt! Quia tempore explicabo sint laboriosam rerum nihil voluptates voluptatibus voluptate iure. Earum magnam blanditiis voluptates quod ex exercitationem reiciendis, iure qui ducimus similique impedit nemo est, quisquam facere id adipisci harum tenetur consequuntur illum saepe laudantium. Suscipit facilis corporis natus aperiam! Reprehenderit hic quia natus nisi similique quod fugiat, architecto autem deleniti unde commodi accusamus modi voluptate?
</div>
Любой Тело может решить мою проблему, многие многие продвигаются вперед благодаря им.