<iframe> click to load

NOT lazyload; click a button instead anywhere in the whole <iframe> element so one won't mis-click; will ignore small / narrow <iframe>s.

Per 05-10-2020. Zie de nieuwste versie.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey, Greasemonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Violentmonkey.

Voor het installeren van scripts heb je een extensie nodig, zoals Tampermonkey of Userscripts.

Voor het installeren van scripts heb je een extensie nodig, zoals {tampermonkey_link:Tampermonkey}.

Voor het installeren van scripts heb je een gebruikersscriptbeheerder nodig.

(Ik heb al een user script manager, laat me het downloaden!)

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een extensie nodig, zoals {stylus_link:Stylus}.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

Voor het installeren van gebruikersstijlen heb je een gebruikersstijlbeheerder nodig.

(Ik heb al een beheerder - laat me doorgaan met de installatie!)

// ==UserScript==
// @name        <iframe> click to load
// @name:zh-CN 手动加载 <iframe>
// @description NOT lazyload; click a button instead anywhere in the whole <iframe> element so one won't mis-click; will ignore small / narrow <iframe>s.
// @description:zh-CN 不是 lazyload;点击按钮而不是点击 <iframe> 元素,以免误触;会忽略大小较小的 <iframe> 元素。
// @namespace   RainSlide
// @author      RainSlide
// @version     1.0
// @match       *://*/*
// @grant       none
// @inject-into context
// @run-at      document-end
// ==/UserScript==

document.querySelectorAll('iframe').forEach(
	iframe =>

		// attribute
		iframe.getAttribute("src")    !== null &&
		iframe.getAttribute("srcdoc") === null &&

		// content size
		iframe.clientWidth  >= 72 &&
		iframe.clientHeight >= 72 &&
		( iframe.clientWidth + iframe.clientHeight ) >= 256 &&

		iframe.setAttribute("srcdoc",

`<style>
html, body { height: 100%; }
body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	min-width: 5em;
	margin: 0;
	padding: .5em;
	border: 2px dashed currentColor;
}
a {
	margin-bottom: 1ex;
	word-break: break-all;
	font-family: monospace;
}
</style>
<a href="${ iframe.src }" target="_blank" rel="noreferrer noopener">${ iframe.src }</a>
<button onclick="window.frameElement.removeAttribute('srcdoc')">${
	new Map([
		["en-US", "Load"],
		["zh-CN", "加载"],
		["zh-TW", "加載"],
		["zh-HK", "加載"]
	]).get( navigator.language ) || "Load"
}</button>`

		)

);