How to add javascript code to url to embed iframe into existing page
I can get the following JS to create an IFRAME and add it to the page.
The problem is I am creating a JS method on the page and will call it on a button click. But when I try to inject the same JS into the url of the page by setting location.href, it doesn't work correctly, instead of replacing 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);";
a source to share
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 just 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);
a source to share
What Casey said ... Or you could put "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'm assuming you don't actually do this with location.href, but actually typing / pasting into the url bar or creating a bookmarklet ... I often get stuck with this when typing javascript into the url bar ...)
Anyway, the main thing to note is that if you set the location (by any of these three methods) to a javascript url and the last statement returns something, the document body will be 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 invalid, so the document body is not replaced. In Casey's assumption, the function does not have a return statement, so the void function and document body are not replaced either.
To understand what's going on, 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 of the result
location.href = "javascript:ifrm = document.createElement('IFRAME');ifrm.style.width = 60+'px';ifrm.style.height = 40+'px';document.body.appendChild(ifrm); confirm('Pick one');";
a source to share
Assuming the string is stored in a variable mystring
:
Method 1 :
eval( mystring.replace("javascript:", "") );
Method 2 (if you want to keep "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);
a source to share