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>
Simply assign the URL in a <script>:
if(window.top == window.self) {
// otherwise you end up in infinite nested iframes
const iframe = document.getElementById('card');
iframe.src = window.location.href;
}