Launching widgets using html / javascript - javascript

I have created a simple webpage that launches a widget after a button is pressed. The button press adds an element to the DOM tree:
var div = document.getElementById("loginWidget");
var loginWidget = document.createElement('script');
loginWidget.setAttribute("type", "text/javascript");
loginWidget.setAttribute("src", "http://widgetstore.etc.etc");
div.appendChild(loginWidget);
This launches the login widget in the webpage. How do I get it to open in a new window (preferably resized to the size of the widget? If I do it like this will my original window be able to access values from the login widget? If this is a bad idea what's the best way to style the widget so it stands out more from the original size.
Forgive my n00bness. Would normally research this myself but in a bit of a hurry!

Take a look at window.open. It will return a pointer to newly opened window. And you can specify a width and height of that window. But note that you must call window.open in onclick handler. Otherwise, if you will call it in your script block it will be blocked by browser.
Also, from widget window you can access initial window using window.parent.

Related

How to make this JavaScript popup window modal?

This is working well for me, but I need to make it modal so it doesn't get lost behind the main app screen. Is there a way to easily make this screen modal?
string url = "EditTables.aspx?title=Edit Asset Classifications&prompt=Classification Name&method=GetClassifications&name=ClassificationName&value=ClassificationID";
string script = "window.open ('" + url + "', 'popup_window', 'width=500,height=135,left=200,top=150,scrollbars=0,resizable=no');";
You can't make the popup modal on modern browsers. (There used to be a different method you could use for popup modals, but it's deprecated now.)
By default, that window should appear in front of the window that opens it. You can also respond to clicks on the opening window's document by calling focus on the window returned by open, to bring that other window to the foreground (stopping when you see the unload event from the popup).
If what you're showing in the modal doesn't have to be a separate window, you might consider not using a separate window at all, but instead using an absolutely-positioned div or similar with an element behind it that covers the entire remainder of the window so that it can prevent clicks and similar from reaching the elements underneath it. But if it has to be a separate window, you don't have much you can do other than the focus thing.

Change chrome app window location, but not from main.js

I have made a window, with a couple of buttons. When I click them, I have a function which fires up. Now my question is how can I change the (same) window to show another html file? I have tried
function callback(a) {
curr_window = a.contentWindow.location;
{
as a callback to the window.create function, and
click_Function(){
curr_window.assign("html file");
}
in a
<script></script>
inside the HTML file, but that didn't work because (from my googling) main.js isn't executed in the page, so their global variables aren't shared. So how can I change the window's location using the onClick function?
You are not supposed to be able to directly change a window's location in a Chrome App. The only part of the location object you can change is the href to reference a fragment in a document.
This was an explicit design decision of the Chrome Apps team to stop apps from having the flash of white whilst it navigates between pages. If you look at the window api the only method is create and that takes the URL of what that window should display.
That being said, you can load an iframe in the main window and change that. You would just need to set the iframe to be 100% of the width and height of the window.

Can I open a new window and change the DOM of the calling window in JavaScript?

First I would like to say that I've been programming JavaScript for about 3 months now and also that I'm not very concerned with solving this problem by the standards or best practices. My main concern is learning to use the DOM. I don't want to use any jQuery because I'm not familiar with it.
I'm trying to make a non-profesional "login" function on my page, using JavaScript and the DOM. To begin with I was using "login" screen that would be displayed "hidden" initially and then be displayed "block" when in use. This worked fine and looked really good when I added a darkened screen behind the "login" screen by adding less opacity (0.1 opacity) to the main part of the page that's beneath the "login screen".
This (the opacity) would return to normal when I closed the "login" screen. So you can see all the stuff is happening within the same page using the same DOM. OK, this is how I wanted it to work: you create a username then you your create a password. Boom, finished!
But here's the problem: after you create a username and password I want it to say "Hello (username here)" where the login link initially was. I could just use the DOM and insert the username into the HTML page, but when I submit the form that is the login function the page gets reloaded and the changes to the DOM become erased!
So now I can tell you about the solution I thought of: make the form (login page) be in a new window, so when the form is submitted (and the DOM is manipulated) the new window is reloaded and then subsequently closes leaving the changes to the main pages DOM intact. Only problem is I can't figure out how to do this. You could probably say that's a major problem hahaha.
So, can I manipulate the parent windows (i.e. the calling window) DOM from the new window?
In response to your answer: you can modify the caller window's DOM by using window.opener.document from the new window;
window.opener is a reference to the caller window (if any, otherwise null), but only if both windows are from the same domain).
NOTE: Is it a small webpage or you are going to do a lot of DOM manipulation on a web site/application via javascript? In the later case you should use a javascript library/framework (I recommend jQuery) in order to do the dirty job more easily.
A popup window can find the window that opened it using the opener variable.
If both the popup window and the original window originate from the same domain, then the popup window can indeed modify the HTML of the original window.
If the popup window and the original window contain content from a different domain, then they can't see the HTML of each other - due to the cross-origin protection that browsers put in place.

setting opener property on iframe

The framework I'm using (Django admin) pops up a new window when adding new items to the database. I would like to use a light box instead of popping up a new window (fancybox for now), and I'm using the iframe option. However, when I click save in the iframe, a request gets sent to the server, and the server responds with a page contains only the JavaScript code: opener.dismissAddAnotherPopup(...). This function basically closes the window and refresh the fields in the parent (opener) window. Since I don't have opener set, it returns an error and never closes the iframe. Is there anyway of setting opener on the iframe so that it won't be null?
Thanks a lot!
Jason
The way to do this is to override the admin view that sends the javascript. These are contained in django.contrib.admin.options: the ModelAdmin.response_add and ModelAdmin.response_change methods. You can simply override these in your model's admin class so that they return the correct fancybox closing code.

Notification when popup is closed using Silverlight's HtmlPage.PopupWindow()

I am popping up an HTML page from a Silverlight application using the HtmlPage.PopupWindow() method. I am trying to handle the event of when the popup window is closed from within Silverlight. This is how I am attempting to do this:
var window = HtmlPage.PopupWindow(new Uri("http://mypopup..."), "popup", options);
EventHandler<HtmlEventArgs> windowClosed = (sender, e) =>
{
// would like to refresh the page when popup is closed...
HtmlPage.Document.Submit();
};
window.AttachEvent("onUnload", windowClosed);
However the event handler never seems to get called. Is this something that is possible or am I missing something?
The Silverlight app and the HTML popup page are on the same domain, however they are actually on different ports. I was thinking that maybe the pages being on different ports would be considered a cross-site restriction and cause the JavaScript to fail.
You have a very very small bug in event name :)
change "onUnload" by "onunload" and try again
You are correct, the variation in port number is enough to prevent Silverlight from accessing events and content of the popup window.
Your onUnload event must be defined in the popup window rather than the parent/opener window to detect any actions made on the child window. In the popup you would track actions in that window and send a call to the parent/opener for status updates. With this call you would also pass any values that you need to that window as you can't read the data of the child window from the parent/opener.
If the page is an iframe of the target page, then you would use parent; as in parent.functionname(data);. If the page is a separate window of the target page you would use opener; as in opener.functionname(data);.

Categories

Resources