0

I have a link that when clicked on I want a new window opened, and in that window I want to run some javascipt code. This is how I create the link: 

$('<a></a>').attr('href', 'javascript:my_func();').attr('target', '_blank')

my_func is run (I set a breakpoint in it and I confirmed that), and there are no errors. But the new window is not created. How can I do this?

EDIT: Trying to implement the solution suggested by @Barmar. Here is my code now:

lwv = load_wafer_viz_on_new_page.toString();
args = '"'+url+'","'+neighbor.data[0]+'","'+date+'"';
lwv += 'load_wafer_viz_on_new_page(' + JSON.stringify(args) + ');'
$('<a></a>').attr('href', 'javascript:var w = window.open();w.innerHTML = "<html><head></head></html>";var script = w.document.createElement("script");script.textContent = lwv;w.document.getElementsByTagName("head")[0].appendChild(script);');

I'm getting a blank page. How do I incorporate this solution into my clickable link?

Larry Martell
  • 3,526
  • 6
  • 40
  • 76
  • 2
    `_blank` windows have no content (code OR html). that's why they're "blank". If you want to run code there, then you'll have to add the code to that new window first. – Marc B Nov 23 '15 at 21:46
  • 3
    This sounds like an attempted solution to a problem. What are you trying to do? – Alexander O'Mara Nov 23 '15 at 21:46
  • I currently have a link that calls a js function and causes new content to be created on the same page you're on. But now I want to create that content in a new window. – Larry Martell Nov 23 '15 at 21:53
  • @acupajoe This isn't quite the same, in this question he doesn't want to open a URL in the new window. – Barmar Nov 23 '15 at 22:18
  • Try creating `html` as string , including jQuery , `script` elements that create , retrieve content in `html` string , calling `window.open()` with string as content of `data URI` . Though requested resources should have `Allow-Control-Allow-Origin` headers – guest271314 Nov 23 '15 at 22:21

1 Answers1

3

Create the window and then inject a <script> tag into its DOM.

var w = window.open();
w.innerHTML = '<html><head></head></html>';
var script = w.document.createElement("script");
script.textContent = "alert('running');";
w.document.getElementsByTagName("head")[0].appendChild(script);

DEMO

If you want to get a function definition into the window and then call that function, you can do:

script.textContent = functionName.toString();
script.textContent += 'functioName(' + JSON.stringify(arg) + ');'

Here's a working version of your code:

neighbor = {
    data: [1, 2, 3]
}
date = "today";
function load_wafer_viz_on_new_page(a, b) {
    alert(a + b);
}
window.lwv = load_wafer_viz_on_new_page.toString();
args = JSON.stringify(neighbor.data[0]) + ',' + JSON.stringify(date);
lwv += 'load_wafer_viz_on_new_page(' + args + ');'
$("a").attr('href', 'javascript:var w = window.open();w.innerHTML = "<html><head></head></html>";var script = w.document.createElement("script");script.textContent = lwv;w.document.getElementsByTagName("head")[0].appendChild(script);');

DEMO

Barmar
  • 741,623
  • 53
  • 500
  • 612
  • How would I make `script.textContent` be the contents of a js fucntion that I have access to in the current page? – Larry Martell Nov 23 '15 at 22:32
  • You can use `function.toString()` to get the definition of the function as a string. – Barmar Nov 23 '15 at 22:34
  • Cool, I didn't know about that function. What about the arguments to the function. How do I get those into the stringafied function? – Larry Martell Nov 23 '15 at 22:43
  • I've added an example of how to add a call to the function. – Barmar Nov 23 '15 at 22:49
  • I updated my original post to show how my code is now. I'm not sure how to integrate your solution into my clickable link. – Larry Martell Nov 23 '15 at 23:05
  • Don't try to do it all in inline Javascript. Put the code into a function, and do `href="javascript:funcName()"` – Barmar Nov 23 '15 at 23:06
  • Well, yes I am going to do that once I have it working. I changed it (and updated the OP) to remove the `attr('target', '_blank')` but I still am getting a blank page and no errors. – Larry Martell Nov 23 '15 at 23:10
  • Open the developer tools in the new window to see what the script looks like. – Barmar Nov 23 '15 at 23:15
  • The new window is empty. No script, no HTML, no nothing. I'm going to have to do some debugging and see if I can see what is going on. – Larry Martell Nov 23 '15 at 23:41
  • You shouldn't stringify multiple args as one string. You need to stringify each argument separately, and pass them each as a separate argument to the function. – Barmar Nov 24 '15 at 00:40
  • Also, don't put quotes around the arguments after you stringify them, that's one of the things that stringify does. – Barmar Nov 24 '15 at 00:41
  • Getting closer. I'm getting `Uncaught ReferenceError: $ is not defined`. My js function uses jQuery and Angular and they are not loaded on the new page when the function runs. Not sure how to load them to the new page. – Larry Martell Nov 24 '15 at 17:05
  • You need to add ` – Barmar Nov 24 '15 at 17:14
  • It's complicated - I currently have a link that calls a js function and causes new content to be created on the same page you're on. But now I want to create that content in a new window. That js function creates a div and then calls the load method of the div passing a URL in. That causes HTML to be returned then the function calls other functions, some in Angular. – Larry Martell Nov 24 '15 at 17:49
  • LIke I said, if you want to create it in a new window, you have to fill in the entire contents, you can't use anything from the current page directly. – Barmar Nov 24 '15 at 17:51
  • Got it. I appreciate all the help. I probably will not have time to work on this again until next week. – Larry Martell Nov 24 '15 at 17:52
  • I decided to do this the right way and load a page from the server. I thought it would be more work, but as is so often the case, doing it the right way was less work. But I leaned a lot from this and I really appreciate the help. – Larry Martell Nov 25 '15 at 19:02