I have created a pdf on the server when i use:
function GetPdf(document) {
//Stores the data and creates the html,pdf file
$http.post('createpdf/', document).success(function(data){
console.log(data.filename);
window.open('download2/'+data.filename+".pdf", "_self");
});
I get a error message pop up blocked in google chrome.
When i use the option enable pop ups for this website it all works fine. Is there any way around this ? Because this could be confusing for some users.
But when i use:
window.open('download2/'+data.filename+".pdf", "_self");
It opens the page without warnings but then the main application is replaced by the pdf which is not the result i want to have.
Browsers have strict rules about when they allow JavaScript to show a popup, but they can be summarized as "Only in response to a user action".
Receiving a response to an HTTP request is not a user action, so popups are banned.
The simple solution here is to not use JavaScript. The point of Ajax is to communicate with the server without leaving the page, but you're going to leave the page anyway so there isn't really any point in using Ajax.
Just use a regular form submission.
<form method="post" action="createpdf/" target="_blank">
… then have the server side script redirect to the URL of the created PDF instead of returning the URL as JSON.
I guess you are using and external JavaScript library, I had the same issue on another Project, I used target="_tab" and it worked, I found this on this question.
It's the way Chrome handles popup calls from JavaScript when you use libraries, I used Moment.js to trigger a similar event and got the same issue.
Pop up blocking is not an issue, but a native browser feature that protect the users from popup-hell.
I would recommend to open the PDF in a modal popup instead of a new browser window.
With some jQuery code it is quite easy to implement: documentation is found here
You can always use an alternative route, for example instead of window.open function. You can use the window.location function, perhaps. Windows.location.replace which will relocate you in the same tab.
<script type="text/javascript">
<!--loc can be any changed to your window-->
var loc = "https://google.com/";
window.
window.onclick = function() {
window.open(loc);
}
</script>
Try that :)
window.open is being blocked because you are doing window.open without a click function. Most web browsers will block this feature for security purposes.
Related
I am working on a web app that needs to have two parts. The one is a controller and the other is a display. Something like Google Slides in presentation mode. The controller has a button to launch the display:
<script language="JavaScript">
function OpenMain()
{
var MainPage = window.open("TheUltraSignalLite.html");
TimerIMG = MainPage.document.getElementById("TimerIMG");
TimerIMG.src = "TM-Full-Blue.jpg";
}
</Script>
The call to window.open seems to return null. I have tried Chrome, Edge, Firefox, and Opera and they all have the result. These are all local files for now, but I might put in on a web server someday. I have seen some answers that want you to turn off security, but I cannot ask everyone who uses this app to turn off security. How do I get a valid reference to the display window?
Edit 1:
Yes, window.open from the local disk does cause a CORS restriction.
I tried this where both files are in the same AWS S3 Bucket, so the CORS should not be an issue. But I still get a null on the window.open. If I put a breakpoint on the first line, then everything worked. If I split the open and the rest of the code into two functions with two buttons, it works. So it looks like I have to find a way to run the open in an async way.
Edit 2
My solution to keep it simple was to put the window.open in the OnLoad event. This opens the child window and allows it to fully render and the value of MainPage is ready to use. (I changed the MainPage to a global variable.) I still have to run it from some type of web server, rather than loacl file, but that is not a big deal.
If you are not allowed to access the new window content, then the problem you are encountering is a basic security feature of web browsers. Citing mdn:
The returned reference can be used to access properties and methods of the new window as long as it complies with Same-origin policy security requirements
To read more about Same-origin policy
If your new window respects the Same-origin policy, then you can access the content of the new window with for example:
// Open index.html from the current origin
const newWindow = window.open('index.html')
const h1 = newWindow.document.querySelector('h1')
If you want to avoid asking users for pop-up permission, then you should probably use a link instead of a pop-up.
I'm coding an Outlook Add-in.
I want to show a dialog message by using displayDialogAsync().
But when I use the method, the confirmation message is shown, before displaying a dialog (I attached a screenshot).
Are there any solutions for skipping this message?
screen shot : the message when a code calls displayDialogAsync()
・reference
https://dev.office.com/docs/add-ins/develop/dialog-api-in-office-add-ins
function openWindow()
{
var startAddress = 'https://localhost:44303/AppCompose/Sample/Sample.html';
Office.context.ui.displayDialogAsync(startAddress);
}
The message is necessary to prevent pop-up blockers. So no, there is no way to skip it if you use pop-up mode. However, if your page supports iframing you can pass the displayAsIframe=true parameter (see documentation); this mode doesn't show the extra confirmation because it is displayed as a floating div with an Iframe (as opposed to a new window).
Important: I see you are using the API in Office Online. Please be aware that we have not yet officially updated our documentation and samples to state that it's supported so you might see some bumps along the way. I expect everything will be in place by early next year.
In Outlook Web Access, use window.open() instead of the Dialog API. This will allow you to launch a child window without displaying this dialog. There are some caveats, though:
The URL of the window being launched must belong to the same domain as your add-in. Otherwise, you may see a popup blocked warning.
Firefox will show a popup blocked warning if window.open() is not called as a direct result of a user action. If your add-in's users may be using Firefox, just make sure that when launching a new window, that you're doing it directly within an onClick handler or something, not via a Promise or an async callback.
In Outlook desktop apps, the Dialog API works as expected, and in fact, using window.open() will always trigger a popup blocked warning.
Our add-in has logic similar to the following:
function launchDialog(url) {
if (/WebApp/.test(Office.context.mailbox.diagnostics.hostName)) {
window.open(url);
} else {
Office.context.ui.displayDialogAsync(url);
}
}
Hope this helps!
I am using C# and asp.net to launch a webpage that I am passing parameters to. That works well! I come from a Windows.Forms background so please forgive me if I am trying to achieve the impossible. What I would like is set the Visibility property of the program (either IE or chrome) to false so the user never sees that a webpage is being launched. I have been using this JS function to close the page, but it seems that the page must completely load before closing which sometimes can take a few seconds.
Does asp.net have the capability to achieve such? And this is my JS code I have been using
string close = #"<script type = 'text/javascript'>
window.returnValue = true;
window.close();
</script>";
base.Response.Write(close);
If you don't want the User to see the page, I assume you just want to post some information to the page. In that case, make an HTTP request via c# code, instead of opening the webpage up in a browser.
On the Project Properties page, Web tab, Start Action section, click the radio button for "Don't open a page. Wait for a request from an external application".
I plan to create a bookmarklet which users will use to share content (bacially url's and page title) around the web on say mysite.com. So this is what I am following till now:
Bookmarklet calls an external.js which basically contains all the logic
external.js can either a) create an iframe or b) open a popup window and pass in the shared url information
Now my question is... is there a possible third approach where the external js file can load everything via ajax from mysite.com. Or since the bookmarklet will share content from other sites this won't work because of same origin policy. And the only way this could work is by making ajax calls from inside the iframe or popup window?
Also is there a preference or downsides for using the popup window vs. iframe approach?
Take a look at the approach used by the Instapaper.com bookmarklet:
javascript:function iprl5(){
var d=document,
z=d.createElement('scr'+'ipt'),
b=d.body,
l=d.location;
try{
if(!b)throw(0);
d.title='(Saving...)'+d.title;
z.setAttribute('src',l.protocol+'//www.instapaper.com/j/xxxxxxxx?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));
b.appendChild(z);
} catch(e) {
alert('Please wait until the page has loaded.');
}
}
iprl5();
void(0)
They in fact use JSONP and insert a script tag on the page.
Your bookmarklet will run in the context of the current page, not your site. So, XHR calls to your site will fail.
In general, an iframe will work better than a popup because of popup blockers.
There are some other clever approaches you can take. Consider a JSONP model. Or, if you only need one way communication (ie, send some data to your site), and you don't care about a response, consider loading a GET request URL as the source of an image. You could even stream back a success or failure image if you wanted to get really fancy.
<img src="http://me.com/AddLink?UserId=123&url=http://you.com&title=Your+Site" />
I'm looking to add a "tweet this" button to a site. Simple enough, right? The catch is that the site is meant to run on an embedded platform that doesn't particularly handle popup windows, so I'm trying to do everything inside the page.
I'm able to successfully create my tweet button, attach an onClick handler to it, and construct a proper twitter.com/share URL for the relevant content. All works fine when I open that URL in a new window with window.open. However, if I try to open the URL in an iframe, nothing loads inside the frame. Even loading http://twitter.com into the iframe fails in the same way. However, loading Google or any other website seems to work just fine.
Any thoughts on what I'm missing here? Thanks! --zach
Edit:
Yep, they are detecting the iframe on load and blanking the page:
if (window.top !== window.self) {
document.write = "";
window.top.location = window.self.location;
setTimeout(function(){ document.body.innerHTML='';},1);
window.self.onload=function(evt){document.body.innerHTML='';};
}
Any reasonable way to get around this, or am I stuck writing my own auth pipeline through oauth? I don't need anything from their API, just letting users tweet to their own accounts.
Twitter (like Stack Overflow) is probably using some Javascript to ensure they're not being presented in an iFrame:
if(top!=self){
//hates you
}
I ran into something similar recently, and ended up re-doing part of my app without the iFrame element.
Go and get a developper account on twitter and things are made easy for you :)
Can you simply redirect the the twitter share URL? I'm guessing they want to be careful about opening the window in iframe's to prevent malicious sites from tweeting in a user's account without giving the user a chance to first confirm their intent to send this tweet.
You said window.open worked fine for popping up the url in a new window but have you tried popping it into the parent frame?
twtWindow=window.open([url],'_parent',[specs])
#yuval Unfortunately for you, the twitter url goes to a page that has the X-FRAME-OPTIONS:SAMEORIGIN header set in the response. It's not a Javascript check. The browser will simply refuse to render the page after seeing the header. This is done to prevent a clickjacking attack, usually done to steal a user's password.
So your only other option is really to redirect your current page with window.location.href=url.