Jump to content
  • 0

Wykonanie kodu JS na stronie utworzonej z CMS - ładowanie iframe


OlbudMaciej

Question

Chciałbym dodać na stronę iframy, w których osadzam interaktywne wizualizacje. 
Stworzyłem prosty js, który przypisuje link z iframe do containera po kliknięciu w button. Osadziłem kod w javascript.tpl i nie uruchamia się. Jak odpalę go w vscode na liveserwerze czy z index.html wszystko działa pięknie. Próbowałem dodawać js w innych miejscach, ale wciąż się nie uruchamiał. Co może być problememem?

Nie mogę dodać na sztywno iframów z wizualizacjami bo są bardzo zasobożerne. 

 

const loadIframeOnClick = (iframeURL) => {
    const container = document.getElementById('iframeContainer');
    if (container.firstChild) {
        container.removeChild(container.firstChild);
    }

    const iframe = document.createElement('iframe');

    iframe.src = iframeURL;
    iframe.width = '100%';
    iframe.height = '100%';
    iframe.frameborder = '0';
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.position = 'absolute';
    iframe.style.left = '0px';
    iframe.style.top = '0px';

    container.appendChild(iframe);
};

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', function () {
        const iframeURL = this.getAttribute('data-iframe-url');
        loadIframeOnClick(iframeURL);
    });
});
 <div>
                    <button
                        data-iframe-url="link do iframe">Załaduj
                        wizualizację</button>
                    <img src="" alt="miniaturka wizualizacji" class="img-fluid">

                </div>


                <!-- Kontener, w którym będą umieszczone iframy -->
                <div style="position: relative; padding-bottom: 56.25%;" id="iframeContainer"></div>

 

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...