תגובה: שיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר
קוד זה מבוסס על סקריפט שנכתב (כנראה על ידי @dovid?) עבור נטפרי. הייעוד של הסקריפט הוא לזהות וידיאו חסום בדף ולהמיר כל אלמנט video חסום שנמצאה בלחצן "שלח בקשה לבדיקה". דרך הפעולה הוא על ידי טעינת הוידיאו בתוך iframe (זה גורם לקבלת דף חסימה), והכנסת ה-iframe לתוך הדף במיקום וגודל המדוייק של אלמנט הוידיאו המקורי.
בקוד המקורי היו ארבע בעיות שניסיתי לתקן:
- לפעמים הקוד לא הצליח לזהות חסימה של וידיאו
- לפעמים ה-
iframe היתה מכסה שטח הרבה יותר גדול מהודיאו המקורי.
- כאשר מקור הוידיאו היתה ב-http לא היתה אפשרות להטעין אותו בתוך iframe בדפים לא מאובטחים.
- לפעמים ה-iframe היתה מוסתרת על ידי אלמנטים אחרים
דוגמאות לדפים בהם הסקריפט נכשלה: 1, 2, 3, 4, 5 (נכון לעכשיו אפשר לבדוק, למי שנמצא בנטפרי, הסקריפט הזה מוזרק בברירת מחדל לכל הדפים)
ישבתי די הרבה זמן על הקוד הזה... (נסיתי כמה דרכים עד שהחלטתי שזה לכאורה הכי טוב)
אשמח לביקורות
נ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.
(function () {
var config = {
attributes: false,
childList: true,
subtree: true
};
var observer = new MutationObserver(
function (mutationsList) {
for (let mutation of mutationsList)
for (let el of mutation.addedNodes)
if (el.tagName == "VIDEO") el.addEventListener("error", function (e) {
addButton(this)
}, true);
}
);
observer.observe(document, config);
var vs = document.querySelectorAll("video");
for (let v of vs) {
// `HTMLMediaElement.error` doesn't get set when the video source is set in a child `source` element
// https://stackoverflow.com/a/34239064/8997905
// https://stackoverflow.com/a/20704999/8997905
// https://stackoverflow.com/a/46508971/8997905
// https://stackoverflow.com/questions/9175415
if (v.error || v.networkState == 3) addButton(v);
v.addEventListener("error", function (e) {
console.trace(e);
addButton(v);
}, true);
}
function addButton(videoElement) {
if (videoElement.buttonAdded) return; // don't run twice on error event - some pages seem to cause 2 errors
videoElement.buttonAdded = 1;
var src = new URL(videoElement.currentSrc);
if (src.protocol == "blob:") return;
src.protocol = document.location.protocol; // load http video over https
var parent = videoElement.parentNode;
var newNode = document.createElement("iframe");
// getComputedStyle will only return a percentage when display is none
// https://stackoverflow.com/a/8406724/8997905
videoElement.style.display = "none";
newNode.src = src.toString();
newNode.style.border = "none";
newNode.style.background = "#fff";
newNode.style.zIndex = 9;
function setProps(iframe) {
[
"position",
"top",
"left",
"bottom",
"right",
"height",
"max-height",
"max-width",
"min-height",
"width",
"min-width",
"max-width",
"padding",
"margin"
].map(prop => newNode.style[prop] = window.getComputedStyle(videoElement)[prop]);
if (newNode.style.position == "static") newNode.style.position = "relative";
}
setProps(newNode);
setInterval(() => setProps(newNode), 3000);
parent.appendChild(newNode);
// mejs will overlay an error message when an error is detected, remove it.
for (let overlay of document.querySelectorAll(".mejs__overlay.mejs__layer, .mejs-overlay.mejs-layer")) {
for (let childElm of overlay.children) {
if (childElm.classList.contains("mejs__overlay-error") || childElm.classList.contains("mejs-overlay-error"))
overlay.remove();
}
}
}
})();
