How pass window handler from one page to another? (JavaScript) - javascript

I have a very strange problem , please don’t ask me why do I need this…
I have a page1. Page1 has a link which opens new window (page2) using window.open function.
chatWindow is a handler of child window with returns from window.open function.
Now I'm moving from page1 to page3 (by link Some Text). And I need to check on the page3 if page2 is close or open.
How to pass handler chatWindow from page1 to page3?
Thank you in advance!

On page2 and page3, you can refer to page1 using window.opener. In page1, you can define a method which checks whether page2 is still open or not: window.open returns an instance of the new window, and null if the window has been closed.
Note that you can only read properties from windows if they're at the same domain. If they're from different domains, you can enable communication using the window.postMessage method.
Assuming that they're at the same domain, you can use the following code (concept code):
window.page2 = window.open('...');
window.page3 = window.open('...');
// At page3:
if (window.opener && window.opener.page2 != null) { // Not null or undefined
// Do something
}
I have used global variables for the ease. A better implementation can consist of a namespace:
window.openedWin = {};
window.openedWin.page2 = window.open('...');
...
// At page3:
if (window.opener && window.opener.openedWin && window.opener.openedWin.page2 ...

Related

How to send child page value to parent page?

I have two pages parent page and child page, I have to add the selected value from child page to parent page. The below is my code for parent page.
function lookup(){
window.open('https://c.ap4.visual.force.com/apex/accountpopup','popuppage','width=400,toolbar=1,resizable=1,scrollbars=yes,height=400,top=100,left=100');
}
function updateValue(param)
{
document.getElementById("name").value = param;
}
And below is my child/popup page code:
function callaccount(param){
var parent1=window.dialogAruments;
var v=param;
parent1.updateValue(param);
window.close();
}
the popup is not closing and sending values to parent page
You can use window.opener. Please note that there are other functions in window like window.open, window.self, window.top and window.parent.
But in your case, window.opener is more relevant, because it refers to the window which called window.open(...)
So, your function should be:
function callaccount(param){
var parent1=window.dialogAruments;
var v=param;
window.opener.updateValue(param);
window.close();
}
Thanks !
Use jQuery local storage
Your code should look like this page1 where you want to pass value:
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("variable", "value");
}
else {
console.log("Sorry, your browser does not support Web Storage...");
}
Your page2 where you need that data:
if (typeof(Storage) !== "undefined") {
// Retrieve
console.log(localStorage.getItem("variable"));
}
else {
console.log("Sorry, your browser does not support Web Storage...");
}
View output in console, and let me know it will helps you or not !
Use window.opener
You need to use window.opener as below in you child page.
childWindow.opener.document.getElementById('<id from parent form>').value = '123';
The opener property returns a reference to the window that created the window.
When opening a window with the window.open() method, you can use this property from the child window to return details of the parent window.

Javascript | Check if a windows with specific URL already is opened

This functions show a /ticket.html popup window.
I need to check before if the window is already opened. If it is, cancel the new openning.
How could this be done?
function popitup() {
newwindow=window.open("ticket.html","_blank","toolbar=yes,scrollbars=yes, resizable=yes, top=500, left=500, width=730, height=700");
newwindow.moveTo(350,150);
if (window.focus)
{
newwindow.focus()
}
}
Regards,
You may save a reference to the window, when opening it. The window.open method returns a windowObjectReference.
With this reference, you can check if the window is closed (closed property, a boolean) or simply if the window is null (window property, which will be a Window object or null, if closed).
Simple example:
// Open the pop-up and save the reference.
var windowObjRef = window.open('ticket.html');
// Verification, alternative 1. You may encapsulate this in a method.
if (windowObjRef.closed) {
// The window is closed.
else {
// The window is still open.
}
// Verification, alternative 2. You may encapsulate this in a method.
if (windowObjRef.window) {
// The window is still open.
else {
// The window is closed.
}
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Window
I'm new to javascript. I found a website giving the following code. But it gives information on only whether the window is created earlier or not.
function myOpenWindow(winURL, winName, winFeatures, winObj)
{
var theWin; // this will hold our opened window
// first check to see if the window already exists
if (winObj != null)
{
// the window has already been created, but did the user close it?
// if so, then reopen it. Otherwise make it the active window.
if (!winObj.closed) {
winObj.focus();
return winObj;
}
// otherwise fall through to the code below to re-open the window
}
// if we get here, then the window hasn't been created yet, or it
// was closed by the user.
theWin = window.open(winURL, winName, winFeatures);
return theWin;
}
Also, accessing the contents of other tabs may also bring attack on privacy of the user.

Pass variable from child window to parent window between 2 applications

I have opened a child window using a showModal dialog where the URL points to a different website as the main window does.
I want to pass some variables from the child window to the parent window using the script below.
Script used in Parent window:
function Open() {
var Return;
Return = window.showModalDialog("https://example.com/ChildApp/ChildForm.aspx", "", "dialogWidth:670px;dialogHeight:600px;")
alert(Return.passVariable);
}
The URL for the parent window is something like this: https://example.com/MainApp/MainForm.aspx
Script used in Child window:
function Close(parameter) {
var vReturnValue = new Object();
vReturnValue.passVariable= parameter;
window.returnValue = vReturnValue;
window.close();
}
In the main window, Return returns null.
One more issue exists when I'm trying to get a reference of window.parent, it gives a null value in the child window.
Note: Here ChildApp and MainApp are two different applications.

Passing an object from knockout to opener window

I have the following scenario in my site, a page (opener) can open a "Settings" page, where you can change settings, save and close in order to continue in the opener page.
The problem is that right now the settings aren't passed along from the settings page to the opener page.
So I added this in the saveSettings function:
saveSettings: function () {
var jsonObj = ko.mapping.toJSON(this.ViewModel);
SD.CORP.WS.HedgingEffectivenessSettingsService.SetHedgingEffectivenessSettings(userID, companyID, selectedProductID, jsonObj, saveSettingsOnSucc, saveSettingsOnFaild);
This is an example of what I've added:
var settings = JSON.parse(jsonObj);
window.opener.requestParameters.ReportSetting.ProspectiveTestSettings = settings.ProspectiveTestSettings;
}
But when I try to use it on the opener these objects are empty, if I try to JSON.stringify the object I get a "The interface is unknown" error.
How can I fix this?
EDIT:
I found out in the meanwhile that the actual problem was that I assigned an object from the settings window to the opener window, so when I closed the settings window, the object no longer existed.
I fixed it by adding a function on the opener script so that I can call it from the settings page and then use $.extend in order to create a deep copy on the opener page.
You can try to use window.postMessage to send the settings from the settings window to the opener. Article on how to use: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
Opener:
window.addEventListner('message', function(event) {
var settings = JSON.parse(event.data)
}, false);
Settings window:
window.postMessage(JSON.stringify(jsonObj));

How to identify if a webpage is being loaded inside an iframe or directly into the browser window?

I am writing an iframe based facebook app. Now I want to use the same html page to render the normal website as well as the canvas page within facebook. I want to know if I can determine whether the page has been loaded inside the iframe or directly in the browser?
Browsers can block access to window.top due to same origin policy. IE bugs also take place. Here's the working code:
function inIframe () {
try {
return window.self !== window.top;
} catch (e) {
return true;
}
}
top and self are both window objects (along with parent), so you're seeing if your window is the top window.
When in an iframe on the same origin as the parent, the window.frameElement method returns the element (e.g. iframe or object) in which the window is embedded. Otherwise, if browsing in a top-level context, or if the parent and the child frame have different origins, it will evaluate to null.
window.frameElement
? 'embedded in iframe or object'
: 'not embedded or cross-origin'
This is an HTML Standard with basic support in all modern browsers.
if ( window !== window.parent )
{
// The page is in an iframe
}
else
{
// The page is not in an iframe
}
I'm not sure how this example works for older Web browsers but I use this for IE, Firefox and Chrome without an issue:
var iFrameDetection = (window === window.parent) ? false : true;
RoBorg is correct, but I wanted to add a side note.
In IE7/IE8 when Microsoft added Tabs to their browser they broke one thing that will cause havoc with your JS if you are not careful.
Imagine this page layout:
MainPage.html
IframedPage1.html (named "foo")
IframedPage2.html (named "bar")
IframedPage3.html (named "baz")
Now in frame "baz" you click a link (no target, loads in the "baz" frame) it works fine.
If the page that gets loaded, lets call it special.html, uses JS to check if "it" has a parent frame named "bar" it will return true (expected).
Now lets say that the special.html page when it loads, checks the parent frame (for existence and its name, and if it is "bar" it reloads itself in the bar frame. e.g.
if(window.parent && window.parent.name == 'bar'){
window.parent.location = self.location;
}
So far so good. Now comes the bug.
Lets say instead of clicking on the original link like normal, and loading the special.html page in the "baz" frame, you middle-clicked it or chose to open it in a new Tab.
When that new tab loads (with no parent frames at all!) IE will enter an endless loop of page loading! because IE "copies over" the frame structure in JavaScript such that the new tab DOES have a parent, and that parent HAS the name "bar".
The good news, is that checking:
if(self == top){
//this returns true!
}
in that new tab does return true, and thus you can test for this odd condition.
The accepted answer didn't work for me inside the content script of a Firefox 6.0 Extension (Addon-SDK 1.0): Firefox executes the content script in each: the top-level window and in all iframes.
Inside the content script I get the following results:
(window !== window.top) : false
(window.self !== window.top) : true
The strange thing about this output is that it's always the same regardless whether the code is run inside an iframe or the top-level window.
On the other hand Google Chrome seems to execute my content script only once within the top-level window, so the above wouldn't work at all.
What finally worked for me in a content script in both browsers is this:
console.log(window.frames.length + ':' + parent.frames.length);
Without iframes this prints 0:0, in a top-level window containing one frame it prints 1:1, and in the only iframe of a document it prints 0:1.
This allows my extension to determine in both browsers if there are any iframes present, and additionally in Firefox if it is run inside one of the iframes.
I'm using this:
var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);
Use this javascript function as an example on how to accomplish this.
function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe
// and the domains are different.
var myresult = true;
try {
var tophref = top.location.href;
var tophostname = top.location.hostname.toString();
var myhref = location.href;
if (tophref === myhref) {
myresult = true;
} else if (tophostname !== "www.yourdomain.com") {
myresult = false;
}
} catch (error) {
// error is a permission error that top.location.href is not accessible
// (which means parent domain <> iframe domain)!
myresult = false;
}
return myresult;
}
Best-for-now Legacy Browser Frame Breaking Script
The other solutions did not worked for me. This one works on all browsers:
One way to defend against clickjacking is to include a "frame-breaker" script in each page that should not be framed. The following methodology will prevent a webpage from being framed even in legacy browsers, that do not support the X-Frame-Options-Header.
In the document HEAD element, add the following:
<style id="antiClickjack">body{display:none !important;}</style>
First apply an ID to the style element itself:
<script type="text/javascript">
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
</script>
This way, everything can be in the document HEAD and you only need one method/taglib in your API.
Reference: https://www.codemagi.com/blog/post/194
I actually used to check window.parent and it worked for me, but lately window is a cyclic object and always has a parent key, iframe or no iframe.
As the comments suggest hard comparing with window.parent works. Not sure if this will work if iframe is exactly the same webpage as parent.
window === window.parent;
Since you are asking in the context of a facebook app, you might want to consider detecting this at the server when the initial request is made. Facebook will pass along a bunch of querystring data including the fb_sig_user key if it is called from an iframe.
Since you probably need to check and use this data anyway in your app, use it to determine the the appropriate context to render.
function amiLoadedInIFrame() {
try {
// Introduce a new propery in window.top
window.top.dummyAttribute = true;
// If window.dummyAttribute is there.. then window and window.top are same intances
return !window.dummyAttribute;
} catch(e) {
// Exception will be raised when the top is in different domain
return true;
}
}
Following on what #magnoz was saying, here is a code implementation of his answer.
constructor() {
let windowLen = window.frames.length;
let parentLen = parent.frames.length;
if (windowLen == 0 && parentLen >= 1) {
this.isInIframe = true
console.log('Is in Iframe!')
} else {
console.log('Is in main window!')
}
}
It's an ancient piece of code that I've used a few times:
if (parent.location.href == self.location.href) {
window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}
If you want to know if the user is accessing your app from facebook page tab or canvas check for the Signed Request. If you don't get it, probably the user is not accessing from facebook.
To make sure confirm the signed_request fields structure and fields content.
With the php-sdk you can get the Signed Request like this:
$signed_request = $facebook->getSignedRequest();
You can read more about Signed Request here:
https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/
and here:
https://developers.facebook.com/docs/reference/login/signed-request/
This ended being the simplest solution for me.
<p id="demofsdfsdfs"></p>
<script>
if(window.self !== window.top) {
//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";
}else{
//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}
</script>
if (window.frames.length != parent.frames.length) { page loaded in iframe }
But only if number of iframes differs in your page and page who are loading you in iframe. Make no iframe in your page to have 100% guarantee of result of this code
Write this javascript in each page
if (self == top)
{ window.location = "Home.aspx"; }
Then it will automatically redirects to home page.

Categories