insert window.location.href in iframe src in vanilla

Question

I am trying to figure out how to insert the current page url into an iframe src that is loaded but hidden on the same page. I don't want to use jQuery because of other functions.

As you can see I am trying to then copy that into an iframe snippet.

Any help would be appreciated, thanks!

<!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

Simply assign the URL in a <script> :

const iframe = document.getElementById('card');
iframe.src = window.location.href;

insert window.location.href in iframe src in vanilla

Question

1 answers

solution1
0 ACCPTED 2022-01-18 23:23:24

insert window.location.href in iframe src in vanilla

Question

1 answers

solution1 0 ACCPTED 2022-01-18 23:23:24

solution1
0 ACCPTED 2022-01-18 23:23:24