Here's my scenario:
I have a page containing several links; each link is meant to open another window containing a pdf. The catch is, I can't have that window directly go to the PDF because I do not want to make it apparent to the end user the PDF is located on another domain, and I need to name the PDF differently than how it would regularly show up.
So then I have two pages: One is blank, and only contains a frame to be used for displaying the PDFs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>[PDF]</title>
</head>
<frameset>
<frame id="pdfFrame">
</frameset>
</html>
And on the page with the links, I have the following function that calls this page (we'll call the above page "pdf.html"):
function OpenWindow(pdfTitle, pdfLocation)
{
var myWindow = window.open("pdf.html", "", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=700,height=600");
myWindow.document.title = pdfTitle;
myWindow.document.getElementById('pdfFrame').src = pdfLocation;
}
For the most part, this seems to work fine; however, on occasion the pop up window will not be loaded prior to the lines above that setup the title/frame source, and it will crash (or not load properly, at least).
My question is, is there a simple way for me to add in some sort of blocking call after opening the window, to wait until we're ready to run this code?
You can't really block until it's loaded but you can set an event in the popup, like this:
myWindow.onload = function()
{
document.title = pdfTitle;
document.getElementById('pdfFrame').src = pdfLocation;
}
Related
I want to do masking of two images.
one image is predefined and second image is uploaded by user, I want to mask these two images in separate new window.
I am stuck here-
I am able to open one image in new window on click event(JQuery - On Click image open separate window). but not able to open two images.
Please guide me how can I open two images on button click event in separate new window or tab
My code-
<a id="largeImage" onClick="swipe()">mask</a>
<script>
function swipe() {
var url = "test1.jpg";
window.open(url,'Image','_blank','','');
}
</script>
when I am using
<script>
function swipe() {
var url = "test1.jpg";
var url1 = "test2.jpg";
window.open(url,'Image','_blank','','');
window.open(url1,'Image','_blank','','');
}
</script>
it is opening only second image(test2 image overriding test1 image)
If you try something in event handler -
window.open(URL1,'_blank','','');
window.open(URL2,'_blank','','');
Actually you can't open two windows in single instinct.
You should also know that window.open is sometimes blocked by popup blockers or by ad-filters.
instead you can use the iframe to acheive similiar thing.
here frame allows you to open multiple pages.
<html>
<head>
</head>
<body>
<a onclick="swipe()"></a>
<iframe name="frame-1"></iframe>
<iframe name="frame-2"></iframe>
<script>
function swipe() {
var url = "test1.jpg";
var url1 = "test2.jpg";
window.open(url,'frame-1');
window.open(url1,'frame-2');
}
</script>
</body>
You can try this fiddle I found:
You can append to body compiled element with binding, something like
$compile('<div>{{var}}</div>')($scope)
or you can add html to body itself and compile it
$compile(angular.element($scope.window.document.body).html('{{var}}'))($scope);
Sample JSFiddle
Here's the link of source: AngularJS: open new window and maintain two-way data binding
Sorry, I'm don't know the right terminology to look this up by keyword...
So, as a simple newbie exercise, I tried to make a file "test.html" (just on my desktop) such that when I load it my browser and click the button that appears on the page, the article count from Wikipedia's main page will appear on the page under the button.
Somebody told me to try using an iframe, and I came up with this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"">
function get_count(){
var articlecount = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
document.getElementById("put_number_here").innerHTML = articlecount;
}
</script>
</head>
<body>
<iframe id="wiki_page" style="display:none" src="http://en.wikipedia.org/wiki/Main_Page"></iframe>
<input type="button" onclick="get_count()" />
<p id="put_number_here"><p>
</body>
</html>
It doesn't work, and when I test this in the scratchpad (using Firefox 17), I get this:
var x = document.getElementById("wiki_page").contentWindow.document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML;
alert(x);
/*
Exception: Permission denied to access property 'document'
#Scratchpad:10
*/
(And alert(document.getElementById("articlecount").getElementsByTagName("a")[0].innerHTML); works perfectly on http://en.wikipedia.org/wiki/Main_Page directly, so I know that's not the problem. Copying the source of the wikipedia main page to a new file "test2.html", and setting that as the src of the iframe, that also works.)
Am I just trying to do this in completely the wrong way?
You cannot access any elements inside an iFrame unless, the iFrame is referring the same domain.
for same domain calls, use this link for reference :
Calling a parent window function from an iframe
for different domain, user this link for reference :
How do I implement Cross Domain URL Access from an Iframe using Javascript? script
You can reference the other frame by using:
window.frames["wiki_page"]
Then you can reference the element in the DOM by using:
window.frames["wiki_page"].document.getElementById ("articlecount");
So in your case you could try:
var targetFrame = window.frames["wiki_page"];
Then Access the elements using:
targetFrame.document.getElementById("IDOfSomething");
Make sure your iframe is still named wiki_page etc...
I have a page with an iframe in it. Within the iframe, the default page runs some javascript to open a child window, login to an external service, then display some content from that external service back in the iframe.
My code works fine in Chrome and IE but in Safari and Firefox it does not. In those browsers the parent window seems to ignore that fact that the user is now logged in to the external service and displays their "Not logged in" message instead of the info that is supposed to display.
Here's the code for what I'm trying to do.
HTML (main page):
<iframe id="brief" name="brief" src="contents/somepage.php?var=WXYZ" width="962" height="600">
<p>Your browser does not support iframes.</p>
</iframe>
somepage.php
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var code = 'WXYZ';
var login = http://www.externalsite.com/brief/html.asp?/cgi-bin/service?msg=0048&usr=username&pwd=pass';
//OPEN CHILD WINDOW AND LOGIN USING VARIABLES ABOVE, THEN CLOSE WINDOW
childWindow=window.open(login,'','width=30,height=30,location=no');
var cmd = 'childWindow.close()';
setTimeout(cmd,2000);
//REDIRECT THIS IFRAME TO BRIEFING INFORMATION
var uri = 'http://www.externalsite.com/brief/html.asp?/cgi-bin/service?msg=0092&AID=NOSEND&MET=1&NTM=1&LOC='+code;
self.location.href=uri;
}
</script>
</head>
<body>
</body>
</html>
I have tried adjusting various setTimeout functions to try to delay certain aspects of the script to wait for something else to happen but it doesn't seem to help.
Is there some cross-browser problem with this code that I am missing?
Thanks
setTimeout(cmd,2000); is not going to block script execution for two seconds; rather, it sets up an event that will fire in approximately 2 seconds. Immediately after your call to setTimeout, the remaining parts of the script will execute:
// This happens right away
uri = 'http://www.externalsite.com/brief/html.asp?/cgi-bin/service?msg=0092&AID=NOSEND&MET=1&NTM=1&LOC='+code;
self.location.href = uri;
The fact that it works in any browser is just lucky timing. If you want the iframe to refresh after the popup closes, add that code to your callback (you don't need to and shouldn't use a string for your timer handler, by the way):
setTimeout(function() {
childWindow.close();
var uri = 'http://www.externalsite.com/brief/html.asp?/cgi-bin/service?msg=0092&AID=NOSEND&MET=1&NTM=1&LOC='+code;
self.location.href = uri;
}, 2000);
Even this solution won't work if the popup's content doesn't load within two seconds. The best solution is to have the popup close itself after loading. Then, you could detect when it closes and know that you're ready to reload your iframe. But if this is a third-party site that you don't have control over, you're probably stuck using a less-than-ideal solution like this.
Morning All,
I was hoping someone could help or provide some sample code for me in refe to the following. I not too sure if i can simply set the asp.net (Visual Studio 2010) properties or if i need some java script to complete my task.
I have a web page with a link on it that when users click it opens to a new web page via the _Blank command.
What i would like to do is have this page open on a really small scale (640px X 480px) and layerd on top of the main webpage. This small page essentially just holds a gridview with items listed for documentation.
I have looked around the internet as i think this would be best done by using JavaScript in the smaller web page but i cant get this to work successfully.
I have found a sample and need to try and tweak this but have been unsuccessfull.
Here is the sample code i have....
<script type="text/javascript" language="javascript">
window.onload = function () {
var w = window.open("about:blank", "main", "width=640,height=480", true)
window.opener = "main";
window.open("", "_parent", "");
w.opener.close();
}
</script>
My smaller web page is named uploadview.aspx
Any help is advenace is much appriechiated.
Regards
Betty
You got to specify window URL in first param of window.open, and must have button to invoke that JavaScript, it's not clear why do you do that on page load event. Anyway, here is the example to open window on some link click
Open Upload View
<script type="text/javascript">
function OpenUploadView() {
window.open("uploadview.aspx?param=1", "_blank", "width=640,height=480", true);
}
</script>
You can also pass parameters to that aspx page like shown above.
You can use window.opendialog()
For more visit https://developer.mozilla.org/en/DOM/window.openDialog
We have a client requirement that has stumped me, embarrassingly enough.
The client has a set of links that need to open in a popup window - if you click on any of the links, it should reuse the same popup window. Easy enough, I thought, so I threw something like this together:
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var popupWin = null;
function openWindow(url) {
if (popupWin == null) {
popupWin = window.open(url,'p2p','');
} else {
if (!popupWin.closed) {
popupWin.location.href = url;
} else {
popupWin = window.open(url,'p2p','');
}
}
popupWin.focus();
}
</script>
</head>
<body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" bgcolor="#ffffff">
<ul>
<li>Google</li>
<li>FB</li>
<li>Apple</li>
<li>ESPN</li>
</ul>
</body>
</html>
If you put that into an html file, all behaves as expected.
My problem is that when I use the client's intranet URLs per their requirement, the behavior I see is as follows:
Click on one of the popup links (popup link opens in a new window)
Click on another of the popup links (link replaces page opened in the first popup)
Close the popup window.
Click one of the popup links (doesn't matter which, opens in a new popup window as
expected)
Click on another of the popup links (popup opens in a new popup window, not reusing the popup window as expected)
The weird thing is that if I step through the javascript code in Firebug, it correctly gets to the branch of the if statement that determines that the popup window exists and is not closed (so it should be reused), but the line of code:
popupWin.location.href = url;
Ends up opening a new window for some reason.
So, any idea what's going on? I'm guessing something bizarre on the pages that the client wants me to popup is screwing things up in some mysterious fashion, but I can't figure out what it is. Wish I could provide the links to you, but unfortunately they're private.
Thanks much for any help.
Mustafa
Isn't this functionality inherent in HTML? Shouldn't it work without the javascript?