index.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>GeoGebra 几何画板</title>
  7. <script src="./deployggb.js"></script>
  8. <style>
  9. body {
  10. margin: 0;
  11. padding: 0;
  12. overflow: hidden;
  13. }
  14. #ggb-element {
  15. width: 100%;
  16. height: 100%;
  17. margin: 0;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="ggb-element"></div>
  23. <script>
  24. // 获取浏览器窗口尺寸(包含滚动条)
  25. const windowWidth = window.innerWidth;
  26. const windowHeight = window.innerHeight;
  27. // 获取文档根元素(html)尺寸
  28. const htmlWidth = document.documentElement.scrollWidth;
  29. const htmlHeight = document.documentElement.scrollHeight;
  30. // 获取body元素尺寸
  31. const bodyWidth = document.body.clientWidth;
  32. const bodyHeight = document.body.clientHeight;
  33. const clientWidth = document.documentElement.clientWidth
  34. const clientHeight = document.documentElement.clientHeight
  35. // 实时监听窗口尺寸变化
  36. window.addEventListener('resize', () => {
  37. console.log('新窗口尺寸:', window.innerWidth, window.innerHeight);
  38. });
  39. var params = {
  40. "appName": "graphing",
  41. "width": clientWidth,
  42. "height": clientHeight,
  43. "showToolBar": true,
  44. "showAlgebraInput": true,
  45. "showMenuBar": true
  46. };
  47. var applet = new GGBApplet(params, true);
  48. window.addEventListener("load", function () {
  49. applet.inject('ggb-element');
  50. });
  51. </script>
  52. </body>
  53. </html>