popup.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. html,
  10. body {
  11. margin: 0;
  12. padding: 0;
  13. width: 100%;
  14. height: 100%;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <input type="text" name="" placeholder="width" id="width"> <br>
  20. <input type="text" name="" placeholder="height" id="height"><br>
  21. <input type="text" placeholder="url" name="" id="url"><br>
  22. <input type="button" value="确定"id="btn">
  23. <script>
  24. window.onload = (e) => {
  25. let _input_url = document.querySelector('#url')
  26. let _input_width = document.querySelector('#width')
  27. let _input_height = document.querySelector('#height')
  28. let _input_btn = document.querySelector('#btn')
  29. let data = {}
  30. _input_btn.addEventListener('click',()=>{
  31. data.width = _input_width.value
  32. data.height = _input_height.value
  33. data.url = _input_url.value
  34. window.parent.postMessage(JSON.stringify(data), '*')
  35. })
  36. window.addEventListener('message', function (e) {
  37. if (e.data) {
  38. let item = JSON.parse(e.data)
  39. _input_url.value = item.url || ''
  40. _input_width.value = item.width || ''
  41. _input_height.value = item.height || ''
  42. }
  43. }, false)
  44. }
  45. </script>
  46. </body>
  47. </html>