☰

手动加载 <iframe>

默认不载入面积较大的 <iframe> 元素，减免一部分不必要的资源消耗。不是 lazyload；点击按钮（而不是点击 <iframe> 的任意位置）才会加载，以免误触。

  1. // ==UserScript==
  2. // @name              <iframe> click to load
  3. // @name:zh-CN        手动加载 <iframe>
  4. // @description       Reduce some unnecessary resource consumption by suspend the <iframe>s with larger area. NOT lazyload; click a button instead anywhere in the whole <iframe> element so one won't mis-click.
  5. // @description:zh-CN 默认不载入面积较大的 <iframe> 元素，减免一部分不必要的资源消耗。不是 lazyload；点击按钮（而不是点击 <iframe> 的任意位置）才会加载，以免误触。
  6. // @namespace         RainSlide
  7. // @author            RainSlide
  8. // @version           1.3
  9. // @match             *://*/*
  10. // @exclude-match     *://web.archive.org/web/*
  11. // @exclude-match     *://codepen.io/*
  12. // @exclude-match     *://music.163.com/*
  13. // @exclude-match     *://*.chaoxing.com/*
  14. // @grant             none
  15. // @inject-into       content
  16. // @run-at            document-end
  17. // ==/UserScript==
  18.  
  19. "use strict";
  20.  
  21. document.querySelectorAll('iframe').forEach(
  22.  
  23. 	iframe => {
  24.  
  25. 		const src    = iframe.getAttribute("src");
  26. 		const srcdoc = iframe.getAttribute("srcdoc");
  27. 		const width  = iframe.clientWidth;
  28. 		const height = iframe.clientHeight;
  29.  
  30. 		const srcURL =
  31. 			src !== null &&
  32. 			src !== "" && // less try ... catch
  33. 			(() => {
  34. 				try {
  35. 					return new URL(src);
  36. 				} catch (e) {
  37. 					return false;
  38. 				}
  39. 			})();
  40.  
  41. 		// attribute
  42. 		// src should be an vaild HTTP/HTTPS URL with a non-null origin,
  43. 		// srcdoc attribute should not exist
  44. 		srcURL instanceof URL &&
  45. 		srcURL.origin !== "null" &&
  46. 		/^https?:$/.test(srcURL.protocol) &&
  47. 		srcdoc === null &&
  48.  
  49. 		// content size
  50. 		// padding of <iframe> included
  51. 		width  >= 72 &&
  52. 		height >= 72 &&
  53. 		( width + height ) >= 256 &&
  54.  
  55. 		iframe.setAttribute("srcdoc",
  56.  
  57. `<style>${
  58. `html, body {
  59. 	display: flex;
  60. 	flex-direction: column;
  61. 	justify-content: center;
  62. 	align-items: center;
  63. }
  64. html {
  65. 	min-width: 5em;
  66. 	min-height: 100%;
  67. 	border: 2px dashed currentColor;
  68. 	box-sizing: border-box;
  69. }
  70. a {
  71. 	margin-bottom: 1ex;
  72. 	word-break: break-all;
  73. 	font-family: monospace;
  74. }`.replace(/\n\t/g, " ").replace(/;\n\}/g, "; }")
  75. }</style>
  76. <a href="${ iframe.src }" target="_blank" rel="noreferrer noopener">${ iframe.src }</a>
  77. <button onclick="window.frameElement.removeAttribute('srcdoc')">${
  78. 	new Map([
  79. 		["en-US", "Load"],
  80. 		["zh-CN", "加载"],
  81. 		["zh-TW", "加載"],
  82. 		["zh-HK", "加載"]
  83. 	]).get( navigator.language ) || "Load"
  84. }</button>`
  85.  
  86. 		);
  87.  
  88. 	}
  89.  
  90. );