Replacing iframe content after period of time

Hi. This is one of my first projects with Javascript and I’m currently working with iframes to show content from external sites.

I’m using x-frame-bypass.js library to, well, bypass the sameorigin errors.

I have one function that takes the ID of specified iframe and loads website into it:

/**
 * Shows websites inside specified loader
 * 
 * @async
 * @param {String} loader ID of the pageLoader element
 */
async function initpageLoader(loader) {
    this.allPagesArray = [
        getSetting('edupageserver'),
        getSetting('additionalpages1'),
        getSetting('additionalpages2'),
        getSetting('additionalpages3')
    ].filter(undefined || null || ' ');
    this.allPagesArrayAfterEdit = allPagesArray.map(function (v) {
        if (v.startsWith('www')) {
            return 'https://' + v;
        } else {
            return v;
        }
    });
    this.allPagesIndex = 0;
    if (allPagesIndex > allPagesArrayAfterEdit.length - 1) {
        allPagesIndex = 0;
    }
    const webpageToLoad = allPagesArrayAfterEdit[allPagesIndex];
    allPagesIndex++;
    document.getElementById(loader).src = webpageToLoad;;
}

Now, the problem is, it just won’t load anything except the original src from index.html file:

<main class="mdl-layout__content">
   <div class="page-content">
     <!-- using temporary url -->
      <iframe is="x-frame-bypass" id="pageLoader" src="https://gakko-55dfd.firebaseapp.com/meow.html"></iframe>
   </div>
</main>

Can anyone help me make this work?

Do you have a link to your full project code on Github or some other location? It is always easier for us to help when we can test the code. For example, I do not see where you are even calling the function named initpageLoader. Are you seeing any errors in the console?

Yep, on github. I can’t post links yet but:

@github /ttomovcik/gakko