<script>
function addIframes() {
const urlInput = document.getElementById('urlInput');
const urls = urlInput.value.trim().split('\n');
urls.forEach(url => {
if (url) {
addIframe(url);
}
});
urlInput.value = '';
}
function addIframe(url) {
const iframeContainer = document.createElement('div');
iframeContainer.className = 'iframe-container';
iframeContainer.innerHTML = `
<div class="iframe-controls">
<button onclick="deleteIframe(this)">X</button>
<button onclick="editUrl(this)">Edit URL</button>
</div>
<div class="top-right-controls">
<button onclick="cloneIframe(this)">+</button>
</div>
<div class="resize-control">
<button onclick="resizeIframe(this)">↔</button>
</div>
<iframe src="${url}" allowfullscreen></iframe>
`;
document.getElementById('iframeList').appendChild(iframeContainer);
}
function deleteIframe(button) {
const iframeContainer = button.closest('.iframe-container');
iframeContainer.remove();
}
function editUrl(button) {
const iframeContainer = button.closest('.iframe-container');
const newUrl = prompt('Enter new URL:', iframeContainer.querySelector('iframe').src);
if (newUrl) {
iframeContainer.querySelector('iframe').src = newUrl;
}
}
function cloneIframe(button) {
const iframeContainer = button.closest('.iframe-container');
const iframeUrl = iframeContainer.querySelector('iframe').src;
addIframe(iframeUrl);
}
function resizeIframe(button) {
const iframe = button.closest('.iframe-container').querySelector('iframe');
const currentHeight = parseInt(iframe.style.height.replace('px', ''));
const newHeight = (currentHeight === 300) ? 500 : 300; // Toggle between 300px and 500px
iframe.style.height = `${newHeight}px`;
}
</script>
Shared snapshot