JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic iFrame</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<!-- Use Bootstrap's 'btn' and 'btn-primary' classes for a styled button -->
<button onclick="createIframe()" class="btn btn-primary">Create iFrame</button>

<!-- Add a new button to trigger the inspection function -->
<button onclick="startInspection()" class="btn btn-success">Start Inspection</button>

<script>
    // Define createIframe function
    function createIframe() {
        // Create a new iframe element
        var iframe = document.createElement('iframe');
        
        // Set iframe attributes (you may adjust these according to your needs)
        iframe.width = '600';
        iframe.height = '400';
        iframe.frameBorder = '0';

        // Append the iframe to the body or any other container element
        document.body.appendChild(iframe);

        // Set the actual source after styles are applied
        iframe.src = 'path/to/your/local-content.html'; // replace with the correct path

        console.log('Iframe created!');
    }

    // Define getAllIframes function
    async function getAllIframes(container) {
        return Array.from(container.querySelectorAll('iframe'));
    }

    // Add the new inspection function trigger
    function startInspection() {
        setTimeout(async function() {
            var allIframes = await getAllIframes(document.body);
            console.log('All-iFrames: ', allIframes);

            // ... (rest of your inspection code)

        }, 5000);
    }
</script>

<!-- Include Bootstrap JS and Popper.js for enhanced functionality (optional) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script...