如何在网址中注入javascript代码以在现有页面中插入iframe

Question

I am able to get the following JS to create IFRAME and add it to the page.

The issue is if I create JS method on the page and ivoke it on a button click it works. But when I try to inject the same JS into the page url via setting the location.href it does not work the right way , rather it replaces the existing page with a new iframe.

Here is my code:

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm);";

Answer 1

You have to wrap it in a function...

location.href = "javascript:(function () {ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm);})()";

...although you can simply replace the location.href change with the actual code:

ifrm = document.createElement('IFRAME');
ifrm.style.width = 60+'px';
ifrm.style.height = 40+'px';
document.body.appendChild(ifrm);

Answer 2

What Casey said... Or you could put a "void 0;" at the end of the script...

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); void 0;";

(I assume you're not actually doing this with location.href, but actually by typing/pasting into the url bar, or creating a bookmarklet... I used to get hit with this a lot when typing javascript into the url bar...)

Anyway, the key thing to note is that if you set the location (by any of those three methods) to a javascript url, and the last statement returns something, the document body is set to that object. In your code, the last line is document.body.appendChild(ifrm) and appendChild() returns the ifrm object. In my suggested answer, the last statement is a void, so the document body isn't replaced. In Casey's suggestion, the function doesn't have a return statement, so it's a void function, and the document body is also not replaced.

To get an idea of what's happening, try this instead:

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); 'Hello world';";

or for some variability in the outcome

location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); confirm('Pick one');";

Answer 3

Assuming the string is saved in the variable mystring :

Method 1 :

eval( mystring.replace("javascript:", "") );

Method 2 (if you want to keep the "javascript:" ):

function clickLink(link) {
    var cancelled = false;

    if (document.createEvent) {
        var event = document.createEvent("MouseEvents");
        event.initMouseEvent("click", true, true, window,
            0, 0, 0, 0, 0,
            false, false, false, false,
            0, null);
        cancelled = !link.dispatchEvent(event);
    }
    else if (link.fireEvent) {
        cancelled = !link.fireEvent("onclick");
    }

    if (!cancelled) {
        window.location = link.href;
    }
}

var link = document.createElement("a");
link.src = mystring;

clickLink(link);