在香草的 iframe src 中插入 window.location.href

Question

我想弄清楚如何将当前页面 url 插入已加载但隐藏在同一页面上的 iframe src。我不想使用 jQuery 因为有其他功能。

如您所见，我正在尝试将其复制到 iframe 代码段中。

任何帮助将不胜感激，谢谢！

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script rel="stylesheet" src="./src/styles.css"></script>
  </head>

  <body>
    <p id="p1" class="offscreen" aria-hidden="true">
      <iframe
        id="card"
        src="http://window.location.href" 
        width="20%"
        height="80%"
        frameborder="0"
      >
      </iframe>
    </p>
    <p id="p2">P2: I am a second paragraph</p>
    <button onclick="copyToClipboard('p1')">Copy P1</button>
    <button onclick="copyToClipboard('p2')">Copy P2</button>
    <br /><br /><input type="text" placeholder="Paste here for test" />

    <!-- <script language="JavaScript">
      var iframe = document.getElementById("card").src;
      iframe.write(window.location.href);
    </script> -->

    <script language="JavaScript">
      function copyToClipboard(elementId) {
        var aux = document.createElement("input");
        aux.setAttribute("value", document.getElementById(elementId).innerHTML);
        document.body.appendChild(aux);
        aux.select();
        document.execCommand("copy");
        document.body.removeChild(aux);
      }
    </script>
  </body>
</html>

Answer 1

只需在 <script> 中分配 URL:

if(window.top == window.self) {
  // otherwise you end up in infinite nested iframes
  const iframe = document.getElementById('card');
  iframe.src = window.location.href;
}

在香草的 iframe src 中插入 window.location.href

insert window.location.href in iframe src in vanilla

html

javascript

iframe