Export button on highcharts to open new tab - javascript

I have a rendered chart on a page and I am overwriting the high charts export link to a custom link to be used with a Zend view.
I am new to javascript and I'm not sure how to export to the new tab:
data.chartOptions.exporting.buttons.printButton = {
onclick : function() {
var win=window.open('','','location=0,titlebar=0,status=0,width=780,height=350');
win.focus();
this.exportChart({
url: ***.zendLink({
param1:***,
param2:***,
controller:"spm",
id:data.id,
action:"view",
format:"print"
})
});
}
}
This does not seem to work, The window is opened and the link is followed on the first window, eg not in the new window. How do I do this?
Do I need to load the javascript into the new window?
If you would like any more information please ask. I'm not sure how much of the code you require.
Thanks

You are doing those as two different things.
1) Opening an window.
2) Calling exportChart.
You should open a some page in you site and render the chart there. So should load export chart source also for that.
You can open a window in new tab like this
window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');
But, it opens an URL in a new tab.
You should have a chart script in that page, and on load of that page you should call this method
this.exportChart

Related

Javascript to reload a new tab page

window.open("http://google.com", '_blank');
var childWindow = "http://google.com";
childWindow.location.href = "http://google.com";
I have an eventAddListener that loads http://google.com on a new tab with a button press, but right after it opens the new tab of google.com, I want it to REFRESH again. NOT my base page but the NEW tab page, by itself. The code I showed is just one of the examples out of 5 pages worth of google search which don't work.
UPDATE:
var win = window.open('google.com', 'New Window'); setTimeout(function () { var win = window.open('google.com', 'New Window'); },3000);
This is the best i could come up with. It opens new tab and "Reloads" the new tab rather than refresh it.
What I want is for example, you click on new tab, you paste a link then press enter, which EXECUTES the link. I basically want a javascript function which EXECUTES the link.
You can't do this.
In order to trigger a reload in the new tab/window you need to run JS in that tab/window.
The same origin policy prevents this.
If you had control over the new page then you could have an event listener running in it and post a message asking that listener to trigger a refresh.
Obviously you can't do that with Google's page.
This question, however, reads like an XY problem. If the goal is to display fresh (and not old, cached, out of date) information and the target page is not a third party one then you shouldn't be using JS to hack your way around caching. Instead set better caching rules on the target page in the first place.
I worked on something similar in the past few weeks and the code below worked for me.
index.html
<button onclick="openTab()">New Tab</button>
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this refreshes that new tab
newTab.location.reload();
}
</script>
Just to prove that this works on the new tab I used the code
<script>
function openTab(){
//this opens a new tab while creating a variable name for that tab
var newTab = window.open("https://google.com","_blank");
//this will alert in the new tab
newTab.alert("New Tab");
//before the following reload code takes effect
//this refreshes that new tab
newTab.location.reload();
}
</script>
Hopefully that's what you are looking for.
From my understanding you want the new tab to refresh once opened with JavaScript instead of the current tab where you run the JavaScript code from.
That's not directly possible. The JavaScript code will only run for the tab it was executed in. The newly opened tab does not know that JavaScript code should be running. The current tab cannot pass over instructions for the new tab to execute.
However, you can select the newly opened tab manually first and then execute Javascript code to refresh the page. But that probably defeats the purpose of what you're trying to do.

How do you create a link which when clicked takes you to a page and also opens a new tab going to another url?

I want to have a link which when clicked preforms two actions:
redirects the current tab of the browser to url A.
opens a new tab directing the browser to url B
How can I do this? Is there HTML for this? Should I use javascript?
You would need to use javascript to achieve this, something along the lines of this:
$('#foo').click(function(e) {
e.preventDefault(); // stop the normal link behaviour so you can open a new window
window.open('http://foo.com/new-page'); // open new tab
window.location.assign($(this).prop('href')); // go to new page in current tab
});
Without jQuery
link // add onclick event
<script>
function f(){
document.location='/a.html'; // open in same tab
window.open('/b.html','_blank'); // open new tab
}
</script>

Want to open two separate windows

I have 20 links and I want to open first 10 in a separate window and the remaining in a separate second window.
Issue is my all links are being opened in 20 tabs in a single window.Wrote following Javascript code.
function myFunction() {
window.open('http://localhost/sample/first.aspx', '1');
window.open('http://localhost/sample/second.aspx', '2');
window.open('http://localhost/sample/third.aspx', '3');
......
......
......
window.open('http://localhost/sample/twenty.aspx', '20');
}
then I tried this
function myFunction() {
window.open('http://localhost/sample/first.aspx', '1');
window.open('http://localhost/sample/second.aspx', '2');
window.open('http://localhost/sample/third.aspx', '3');
window.open('http://localhost/sample/eleventh.aspx', 'myWindow', "height=200,width=200",'1');
window.open('http://localhost/sample/twelfth.aspx', 'myWindow', "height=200,width=200",'2');
}
though this opens a new window but it over rides all the links and shows only one link(whichever is the last) opened.
Means,if we take this code as an example as it is written here, first 3 links open properly in 3 tabs in a single window,after that a window opens with having only 'localhost/sample/twelfth.aspx' opened in that new window.
what to do to resolve this issue and open specific number of links in separate tabs in a separate window?
I'm fairly certain this isn't something that's controllable through javascript itself since this affects browser behavior.
Looking through most browsers there's settings for how to treat links, especially new tab vs. new window.
So, without knowing with 100% certainty, I'd say no, it's not possible to do with just plain javascript.
To open link in new window
window.open('url', 'window name', 'window settings')
To open link in new tab
window.open('_link is here_', 'name');
Where 'name' :-
_blank - URL is loaded into a new window. This is default
_parent - URL is loaded into the parent frame
_self - URL replaces the current page
_top - URL replaces any framesets that may be loaded
you can use this.

How to refresh another page using javascript without opening the same page in a new tab

Is it possible to refresh a page from another page using Javascript or JQuery without opening the same page in a new tab.
JS:
var newtab = window.open('http://localhost:8081/app/home');
newtab.document.location.reload(true);
I tried the above, but here, it will open a new tab, with the same page, which is already opened in the browser.
Please suggest a method.
I got the idea from a previous Question , here they used window Object Reference to reload the popup window, but for me it wont work, because, the parent window and child window runs in 2 different ports. So using the same trick, what i did is :
HTML:
<a onclick="openNewTab()">app2</a>
<a onclick="refreshExistingTab()">Refresh</a>
JS:
<script>
var childWindow = "";
var newTabUrl="http://localhost:8081/app/home";
function openNewTab(){
childWindow = window.open(newTabUrl);
}
function refreshExistingTab(){
childWindow.location.href=newTabUrl;
}
</script>
refreshExistingTab() this instend of refreshExistingTab
take a look at https://developer.mozilla.org/en-US/docs/Web/API/Window.open
basically if you do window.open and specify a window name it will overwrite that window with the url you provided.
so if you open the page each time with same window name, it should overwrite it each time you do it again from that other page.

Detaching/opening an iframe into a new window

I have an iframe setup within a page and basically want to know whether it's possible to have a button in this iframe and when pressed, opens the iframe into a new browser window, showing the contents of the iframe.
I am planning on using either JavaScript or jQuery to achieve this. I am using IE6.
$('.button').click( function(){
window.open($('iframe').attr('src'),'mywindow','width=400,height=200');
});
For what you need (to open the same page where this button), no matter if it's an iframe or if in the home page.
The only difference is if you want that data to open in new window, are a reflection of the same page, such as data that can be an input.
If you care about who are the same data:
$("#mybuttonOpenWin").click(function(){
window.open(window.location.href);
});
If you are interested, you can try this code:
$("#mybuttonOpenWin").click(function(){
var mref = window.open(window.location.href);
(function = onReadyRef(xref){
if(xref.window.document.readyState=="complete"){
$(xref.window.document).find("body").html($("body").html());
}
else{
onReadyRef.call(this, xref);
}
})(mref);
});

Categories