forms_iframe.html (1810B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Forms iframe</title> 6 <meta name="viewport" content="minimum-scale=1,width=device-width" /> 7 </head> 8 <body> 9 <form id="form1"> 10 <input type="text" id="user1" value="foo" /> 11 <input type="password" id="pass1" value="foo" /> 12 <input type="email" id="email1" value="@" /> 13 <input type="number" id="number1" value="0" /> 14 <input type="tel" id="tel1" value="0" /> 15 <input type="submit" value="submit" /> 16 </form> 17 <input type="Text" id="user2" value="foo" /> 18 <input type="PassWord" id="pass2" maxlength="8" value="foo" /> 19 <input type="button" id="button1" value="foo" /> 20 <input type="checkbox" id="checkbox1" /> 21 <input type="search" id="search1" /> 22 <input type="url" id="url1" /> 23 <input type="hidden" id="hidden1" value="foo" /> 24 </body> 25 <script> 26 const params = new URL(document.location).searchParams; 27 28 function getEventInterface(event) { 29 if (event instanceof document.defaultView.InputEvent) { 30 return "InputEvent"; 31 } 32 if (event instanceof document.defaultView.UIEvent) { 33 return "UIEvent"; 34 } 35 if (event instanceof document.defaultView.Event) { 36 return "Event"; 37 } 38 return "Unknown"; 39 } 40 41 function getData(key, value) { 42 return new Promise(resolve => 43 document.querySelector(key).addEventListener( 44 "input", 45 event => { 46 resolve([key, event.target.value, value, getEventInterface(event)]); 47 }, 48 { once: true } 49 ) 50 ); 51 } 52 53 window.addEventListener("message", async event => { 54 const { data, source, origin } = event; 55 source.postMessage(await getData(data.key, data.value), origin); 56 }); 57 </script> 58 </html>