时间戳

首页 > 解决方案 > 通过单击按钮在新窗口中传递和运行 JavaScript 代码

javascript - 通过单击按钮在新窗口中传递和运行 JavaScript 代码

问题描述

如何使 html 按钮运行代码？

我想要做的是放一个按钮<button>打开一个新页面about:blank并拥有那里的代码<textbox>。

我不知道如何使about:blank页面有代码。我试过了：

<button src="about:blank" target"_blank" data-uri="(I don't know what to put here or if this is even correct)">Click to run code</button>

我正在尝试用 HTML 和 JS 来实现它。如果有人可以提供帮助，那就太棒了！

标签： javascripthtml

解决方案

这应该适用于几乎所有的浏览器（在 FF 和 Chrome 中测试）：

<!-- Your link !-->
<a id="externalLink" href="#/">Click to run the code</a>

<script>
  const el = document.getElementById('externalLink');

  // Create a content for a new page with a script in it
  const newPageContent = `
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>alert('Hello World!')<\/script>
    Hello world! 
  </body>
  </html>
  `;

  // Listen on "click" event
  el.addEventListener('click', (e) => {
    e.preventDefault();

    // Create a new window on click
    const w = window.open('', '_blank');

    // Write your content to it
    w.document.write(newPageContent);
  });
</script>

虽然我无法href="data:text/html"正常工作。我认为它应该被浏览器的一些安全规则禁止。

推荐阅读