Skip to content

Commit 713c042

Browse files
javascript-2020javascript-2020
committed
save file
1 parent 3a07a30 commit 713c042

File tree

1 file changed

+280
-0
lines changed

1 file changed

+280
-0
lines changed

‎utils/editors/srcdoc/v2.0/srcdoc-v2.0.html‎

Lines changed: 280 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,280 @@
1+
2+
3+
4+
<!-- headers
5+
cross-origin-isolate
6+
-->
7+
8+
9+
<html>
10+
11+
<head>
12+
<meta charset=utf-8>
13+
14+
<title>
15+
srcdoc
16+
</title>
17+
18+
<meta name=description content='Load and render remote HTML with full header control using fetch and iframe srcdoc. A powerful tool for developers who need dynamic previews, authentication, or custom request handling.'>
19+
20+
<base href='https://ext-code.com/utils/editors/srcdoc/'>
21+
<link rel=canonical href='https://ext-code.com/utils/editors/srcdoc/srcdoc.html'>
22+
23+
<meta name=viewport content='width=device-width, initial-scale=1'>
24+
<link rel=icon type='image/png' href='iVBORw0KGgoAAAANSUhEUgAAACgAAAAsCAMAAAAgsQpJAAAAWlBMVEVHcExXpP9XpP9XpP9XpP9XpP9XpP9bpv9WpP9XpP9XpP9XpP9XpP9Wo/9XpP9XpP9XpP9XpP9XpP9XpP9Zpv9WpP9XpP+cyv+Txf9/uv91tf9iqv+KwP9rr/9r+fBYAAAAF3RSTlMAHeFk6nAK/Xs0BNNJwicTpLfdP/WSXXgcQWoAAAGfSURBVDjLvZRZtoMgEAWFqCgqGDCRqfe/zQeSAQIZvl7lHPNTQjf2pWkC6HqqMvdNRn8mdbZLbiJhVA1NSG4iofcablvbp9lzzoQulztEeXqYbJ0mQWyJUbsjy7klQxT9K0ONhYBSBgDsEpfsMGpqXIiFsP1uUpFmRBFcNFORreeEpTtEqw0JZiqiy5pyirV7iH7ZugJljEn8g/j4EKlIUQ1aiuOES6axFHltyq68FH+u8Wexl3OJ7CvNiLZEVJqhY43+P5rhXWVyO1SKbJlKlrHhUaTPZnzAMsbjfOSMjXMwzZLReo1XvEVu18DWDrSMQrg4wOUYgYoorKzpF/NyE2jMiihcUCIqozLxhSgq0Lu2GtwX0VnrdgMKrH6KlD8DwOkh6hBqZY3f3UfxLvooiBshAUEE4rd0x8NadRf5tbsTEhBEB35nbVUs4VONyq8JEL0vXWt9lKiSrtMo+AQ8zlGrlwNPoyDGD1+mzxNAV6tzYOLV6RnPcSTF1t5mcw5jJlnBKA/mdojzGWZ8xi1+R4ulH8Hj5//l6T2SPsr5A6avRJ8t3CbuAAAAAElFTkSuQmCC'>
25+
26+
<script type='application/ld+json'>
27+
{
28+
"@context" : "https://schema.org",
29+
"@type" : "SoftwareApplication",
30+
"name" : "srcdoc",
31+
"url" : "https://ext-code.com/utils/editors/srcdoc/srcdoc.html",
32+
"author" : {"@type":"Person","name":"Matthew Richards"},
33+
"description" : "Load and render remote HTML with full header control using fetch and iframe srcdoc. A powerful tool for developers who need dynamic previews, authentication, or custom request handling.",
34+
"applicationCategory" : "DeveloperApplication",
35+
"operatingSystem" : "All",
36+
"browserRequirements" : "Requires JavaScript-enabled browser",
37+
"softwareVersion" : "1.0.0",
38+
"offers" : {"@type":"Offer","price":"0","priceCurrency":"GBP"}
39+
}
40+
</script>
41+
42+
43+
<script src='https://libs.ext-code.com/js/dom/component/component.js'></script>
44+
45+
<script init>
46+
console.clear();
47+
console.log('srcdoc.html');
48+
console.log();
49+
console.json=v=>console.log(JSON.stringify(v));
50+
var df=true,version='v2.0'
51+
;
52+
53+
var ext;
54+
var $;
55+
var datatype;
56+
var menumod;
57+
var keydown;
58+
var debug;
59+
var github;
60+
61+
62+
async function init(){
63+
debug('init',version);
64+
65+
await initdom(document.body);
66+
67+
68+
}//init
69+
70+
71+
(async()=>{
72+
73+
mod.stack.add;
74+
75+
({ext} = await import('https://libs.ext-code.com/js/io/ext-loader/ext-loader.m.js'));
76+
77+
var promise = ext.load.libs(
78+
'js/dom/$.js',
79+
'js/core/datatype.js',
80+
'js/dom/menumod/menumod.js',
81+
'js/dom/keydown/keydown.js',
82+
'js/debug/debug.js',
83+
'js/io/github/github.js',
84+
);
85+
[$,datatype,menumod,keydown,debug,github] = await promise;
86+
87+
mod.stack.complete;
88+
89+
})();
90+
91+
</script init>
92+
93+
94+
<!--
95+
<link rel=stylesheet href='/utils/css/utils.css'>
96+
-->
97+
<style>
98+
99+
html
100+
{height:100%}
101+
body
102+
{height:calc(100% - 16px);display:flex;flex-direction:column;font-family:arial}
103+
104+
.icon
105+
{border:1px solid gray;border-radius:3px;box-sizing:border-box;width:30px;height:30px;cursor:pointer}
106+
107+
.copy
108+
{padding:2px;
109+
content:url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAABSlBMVEVHcEwnz/4C8P4g1P4L6P43wf5Mr/4a2v4Y3P4/uv5PrP4+vf5Auv4ozv5KsP4vyv45wP5Jsf5Auf49vP5Mrv4zxf44wf5Lr/46wP4h1P5Lr/46vv5Jsv4R5P5Hs/5Etv44wf5Hs/41w/4uyv47vv49vP5Ftf5GtP4c2f4rzP4tyv4m0f5Etv5Nrv4xxv4xxv4xx/4W3/5KsP5Mr/4/u/4uyv5Isv4K6f4l0f4qzv4W3/4V3/5Nrv5Mrv5Mrv5Mr/4W3v4e2P5BuP5Hsv4N5v4K6f4O5v42w/5Dt/4E7/4uyf4C8P4nz/4M5/4K6v4oz/4P5f4k0v4b2v5Gs/4E7v4I6/5Nrf4e1/4H7P4E7v5Auv5Dtv4sy/5Isv5GtP4wx/49vP4zxf47vv44wP42w/5LsP5Jsf4i1P4n0P4N5v4k0v4a2v4S4v4X3v6OfcqkAAAAVnRSTlMACo7CjQWN/VczjgIJMfIXJzHtjj5iVekR71Hvtz7CjelXjre2wiJj2PCFIWbR7+fEnXaodz3544/USfOC22Tm7CXOnqfUZ+/3VTV9bsTzqGDahpb2tyRB6bIAAAIDSURBVDjLrZVpV9pAFIYntdFiQkZsLCQECtJSlqAsFRBU3Kuta1sncYGuJEDt///aISkkkyHo6enzLTlP5s5758wNAC526pd3d1++/fzx/evNze1tp210wxURUMTWBz2v2EWtLc7jBTPmoJfNrqy8i0ajixgB00VISJIeW9JMKbcWDAYDNiFMQN1EqAAJcUfSBif0fsQWQjLxpjGnXUJa5CoIbTiP8KJ0OqfNMLQIZhGad/Ke3t///vWwGKv1+yPxfW55+TnmJWZW5ggxcqX3m6WSVTpSdPcxHCLExmf97AI8e1j8cK1f8X9Fq/Sotrf0k2v9KRiJ08L8mwhf2CQx8oK/yJyPw3Q67ULaV4Tr7tRCwFfkllLF4ushccwGPyUMzwzhMQz/X1Kz+QVMmh2LcjgsTxDZ3OpqIpFYfDu+KGwoxE5JvTtpF9NX9BEB792jn0gD4eNEsVAQHyXOO7fQFmNNLZOnPV5BqEyI+Yxm1qkluS0BCWRp8FEze6mTJQtVVd8MUfcEhBSGFOGMOWmaoc0AmRoXP5cmiHEReEXANOopzCsLRYlXjWolGXE2jK/r/ujEWAdOFIxWGrjO8ljXazG6MeynthEn2gAP9P7B4XCE2thzdG2v2jbK5LfHZ3hINbclSco6o/kIh1Einq4e1qxp5m2PkqZ/CPvbXvFot+xe7w/EpaiUrJ24NAAAAABJRU5ErkJggg==);
110+
}
111+
.paste
112+
{content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAVlJREFUSEvtlj1ug0AQhcdIW6RLeiQy6XKElLRIlOlp6LmBlRsgtzTUOQAtcZMzpMpInAGlQSjRWl7LxrM/dlhZUbwtu/PNvH07zAIutBYX4oIzGBG/95MkIuezXHFOh6MoegqC4F0GEELAMAybWL+BG8GI+AwArypjRFTAgyLOSeAIHIbhjRDii5NHgcdxhK7rWHu4JnEEnt6ljK6AUxIRcfAPInq0mVYL/lwSrNa3UL7d2WKA3CvXw8vuKqzeMYKtxMmGK9ik2FVq+XQ2rVE5VSeXMpLNgLp3fZbUrlCVFAc/GaygbdvaioU4jrU9/W+CVUVc6U3TQJIkfio2geVV/C+pi6KAsiz9SN33PaRpyrrbu9R1XbPgLMv83bHJXHmeQ1VVp0tt6w6zN5DtqHMwynJJeAGbqkVEOefc2xTZ/+7Uq10CcgOh7pzz38kFPMce6zQ4B4SL8QNf7+YfCGbtNAAAAABJRU5ErkJggg==);}
113+
114+
#url-root
115+
{display:flex;gap:5px;align-items:center}
116+
#url
117+
{flex:1;padding:5px 10px;font-size:16px}
118+
119+
iframe
120+
{flex:1;border:none}
121+
122+
input
123+
{font-size:16px;padding:5px 10px}
124+
input[type=button]
125+
{cursor:pointer}
126+
127+
</style>
128+
129+
</head>
130+
131+
132+
<body>
133+
134+
<div id=url-root>
135+
<img class='copy icon'>
136+
<img class='paste icon'>
137+
<input id=url autocomplete=off spellcheck=false>
138+
<input type=button value=go>
139+
140+
</div>
141+
142+
<iframe></iframe>
143+
144+
</body>
145+
146+
147+
<script>
148+
debug(version);
149+
150+
var input;
151+
var iframe;
152+
153+
154+
var btn = {};
155+
var onmsg = {};
156+
157+
158+
//:
159+
160+
161+
function initdom(){
162+
debug('initdom');
163+
root = document.body;
164+
165+
input = $(root,'#url');
166+
167+
$(root,'.copy').onclick = btn.copy;
168+
$(root,'.paste').onclick = btn.paste;
169+
170+
$(root,'[value=go]').onclick = btn.go;
171+
172+
173+
iframe = $(root,'iframe');
174+
175+
176+
177+
178+
}//initdom
179+
180+
181+
btn.copy = async function(){
182+
183+
var txt = input.value;
184+
await navigator.clipboard.writeText(txt);
185+
}//copy
186+
187+
188+
btn.paste = async function(){
189+
190+
var txt = await navigator.clipboard.readText();
191+
input.value = txt;
192+
193+
}//paste
194+
195+
196+
btn.go = async function(){
197+
198+
var url = input.value;
199+
var result = github.parse(url);
200+
if(result.error){
201+
alert(result.error);
202+
return;
203+
}
204+
205+
if(!result.token){
206+
result.token = localStorage['github-token'];
207+
}
208+
209+
if(result.token){
210+
result.api = true;
211+
}
212+
var url = github.build(result);
213+
214+
var err;
215+
216+
try{
217+
218+
var res = await fetch(url);
219+
220+
}//try
221+
222+
catch(err2){
223+
224+
err = err2;
225+
226+
}//catch
227+
228+
if(err){
229+
alert(err.toString());
230+
return;
231+
}
232+
233+
234+
var html;
235+
if(github.parse.is.api(url)){
236+
var json = await res.json();
237+
var b64 = json.content;
238+
html = window.atob(b64);
239+
}else{
240+
html = await res.text();
241+
}
242+
243+
iframe.srcdoc = html;
244+
245+
}//go
246+
247+
248+
//:
249+
250+
251+
window.onmessage = function(e){
252+
253+
var str = e.data;
254+
var json = JSON.parse(str);
255+
256+
switch(json.type){
257+
258+
case 'load' : onmsg.load(json); break;
259+
260+
}//switch
261+
262+
}//onmessage
263+
264+
265+
onmsg.load = function(json){
266+
267+
input.value = json.url;
268+
269+
}//load
270+
271+
272+
273+
274+
</script>
275+
276+
</html>
277+
278+
279+
280+

0 commit comments

Comments
 (0)