Search code examples
javascriptiframe

Why does order of loading two iframes work differently?

sorry for my English and code, I am the beginner in JS.

wanna do a simple page with 2 iframes

all functions, that I wrote works, but order of calling functions matters and I don't know why...

func_Search_1(search_text);
func_Search_2(search_text);

But 2nd one doesn't work, If I write:

func_Search_2(search_text);
func_Search_1(search_text);

then 1st on won't work...

I'm truly stuck :(

My code is:

<body>
    <input type="text" id="txt_search" name="txt_search">
    <button onclick="func_Search()">Search</button>

    <script>
    const iframe_1 = document.createElement("iframe");
    iframe_1.src = "https://slovniky.lingea.cz/anglicko-cesky/";
    iframe_1.setAttribute("width", window.innerWidth);
    iframe_1.setAttribute("height", window.innerHeight/2);
    iframe_1.style.top = "42px";
    iframe_1.style.left = "0px";
    iframe_1.frameBorder = "no";
    iframe_1.scrolling = "yes";
    iframe_1.style.position = "relative";
    iframe_1.style.zIndex = "1000";
    iframe_1.id = "iframe_1";
    document.body.appendChild(iframe_1);

    const iframe_2 = document.createElement("iframe");
    iframe_2.src = "https://prirucka.ujc.cas.cz/";
    iframe_2.setAttribute("width", window.innerWidth);
    iframe_2.setAttribute("height", window.innerHeight/2);
    iframe_2.style.top = "0px";
    iframe_2.style.left = "0px";
    iframe_2.frameBorder = "no";
    iframe_2.scrolling = "yes";
    iframe_2.style.position = "relative";
    iframe_2.style.zIndex = "1000";
    iframe_2.id = "iframe_2";
    document.body.appendChild(iframe_2);

    function func_Search (){
        search_text = document.getElementById('txt_search').value;

        func_Search_1(search_text);

        func_Search_2(search_text);
    }

    function func_Search_1 (search_text){
        const iframe_1 = document.getElementById("iframe_1");
        iframe_1.src = "https://slovniky.lingea.cz/anglicko-cesky/"+search_text;
        iframe_1.location.reload();
    }

    function func_Search_2 (search_text){
        const iframe_2 = document.getElementById("iframe_2");
        iframe_2.src = "https://prirucka.ujc.cas.cz/?slovo="+search_text;
        iframe_2.location.reload();
    }
    </script>
</body>
Solution

  • iframe_2.location.reload(); and iframe_1.location.reload(); are not functions, you can remove them.

    Look at the browser console to debug you errors :)