We Keep Coding

how to make sure that a popup window is fully loaded when using postMessage API?

as you know, using the API postMessage of html5, we can post message to an iframe of the current page, or to a new popup window, but if we code like this:
var popwindow = window.open('http://localhost:8080/index2.html');
popwindow.postMessage({"age":10},
'http://localhost:8080/index2.html');
we will not get the message for we use "postMessage" when the popup window has not loaded yet, so how can we make sure the popup window is loaded? we cannot use popwindow.onload in the current page, so how can we? pls help me ~ thanks

you could alwyas use
window.opener.postMessage(...
in index2.html to signal the opener that it is loaded
or, there's the oldschool way:
in index.html
function imOpen(win) {
win.postMessage(// whatever ...
}
window.open('index2.html');
in index2.html
window.addEventListener('load', function() {
window.opener.imOpen(window);
});

You don't need the postMessage API for a popup window being used this way.
//Inside parent window
var data = {age: 10}; //No quotes around age
window.open('http://localhost:8080/index2.html');
//Inside popup window
var sameData = window.opener.data;
Admittedly though, you probably shouldn't use a popup window through window.open(...), since they get blocked all the time.
If you go with an iframe modal, you might be able to get the postMessage way to work by doing something like
//In iframe
window.addEventListener("message", iframeReceiveMessage);
document.addEventListener("DOMContentLoaded", function() {
//JSON data for message
window.parent.postMessage("iframe is ready", "http://localhost:8080");
});
function iframeReceiveMessage(event) {
var iframeData = JSON.parse(event.message);
//iframeData.age === 10
}
and then listening in the parent with:
//In parent
window.addEventListener("message", parentReceiveMessage);
function parentReceiveMessage(event)
{
if (event.origin !== "http://localhost:8080" && event.message !== "iframe is ready") { return; }
var iframe = document.getElementById("iframeId").contentWindow,
parentData = {age: 10};
iframe.postMessage(JSON.stringify(parentData), "http://localhost:8080");
}
Since some browsers only accept strings in the postMessage response so you'd have to convert your data to JSON.
Still, it's probably overkill for sending object data. If you're already on the same domain, have you thought about using sessionStorage?
https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
You'll still have to use JSON.stringify and JSON.parse (sessionStorage only stores strings), but it's pretty simple:
//Store it
var data = {age: 10};
sessionStorage.data = JSON.stringify(data);
//Use it
var newData = JSON.parse(sessionStorage.data);
//Remove it
sessionStorage.removeItem("data");
One drawback to this method is that sessionStorage is separate for HTTPS pages, so you can't send sessionStorage data between the two protocols!

Why opening a product page in eBay redirects to a different URL?

When I open the following url in browser,
http://pages.ebay.com/link/?nav=item.view&id=141628727383&alt=web
It redirects to a different url
http://www.ebay.com/itm/141628727383
What's the mechanism?

Because it uses some kind of JS redirection:
var eULin;
window.onload = function() {
eULin = new eUL();
eULin.version = '1.4.1+1424198141014';
eULin.redirect();
}
eUL is defined in http://pages.ebay.com/link/univlink.min.js
eUL.prototype.redirect calls eUL.prototype.winRedirect, which calls location.replace. That replaces the current page with a new one, in a way that the current one won't be accessible using the back button.

SessionStorage is not empty when link opened in new tab in Internet Explorer

I need to have some unique id on every opened browser tab (in a javascript object). The Id must be saved through requests and i decided to use sessionStorage for it.
When i opens the new page in browser it works well.
But when i click a link by right mouse button and choose 'Open link in new tab' in IE 11 - sessionStorage is not empty. So my expectations about new id failed .
Chrome works another way, sessionStorage is empty.
Does anyone know how to solve this problem for IE?

I know this is an ancient question but I just today struggled with this myself. I was opening a new tab with a link with target="_blank" expecting the sessionStorage to be empty. It was not.
NOTE: All of this is untested code but you should get the jist. Also the browser I was experiencing this problem with was Firefox 44.0.2.
My code was something along these lines:
Problematic code:
$(window).ready(function(){
//Get saved session data
var persistedObject = null;
try{
persistedObject = JSON.parse(sessionStorage.getItem('tabData'));
}catch(e){}
});
function updateSessionStorage(){
var objectToPersist = {};
//Get some data to persist
objectToPersist.value1 = "some data";
//Save the data in the session storage
sessionStorage.setItem('tabData', JSON.stringify(objectToPersist));
}
This picked up data from earlier tabs that were closed.
I solved this by changing my code to something like this:
Working code:
$(window).ready(function(){
//Get saved session data
var persistedObject = null;
try{
persistedObject = JSON.parse(window.name);
}catch(e){}
});
function updateSessionStorage(){
var objectToPersist = {};
//Get some data to persist
objectToPersist.value1 = "some data";
//Save the data in the session storage
window.name = JSON.stringify(objectToPersist);
}
This worked beautifully. The window name is persisted until you close the tab/window, which is exactly what I was expecting sessionStorage to do. New pages is always loaded with window.name = "" if no name was given on the link handling side.
What you might miss out on is the fact that you can't straight out of the box use names such as my sessionStorage.setItem('tabData', 'some data') but you can easily avoid this by doing something like this:
Suggestion:
function updateSessionStorage(){
var objectToPersist = {};
try{
objectToPersist = JSON.parse(window.name);
}catch(e){}
if(objectToPersist[tabData] == undefined){
objectToPersist.tabData = {};
}
//Get some data to persist
objectToPersist.tabData.value1 = "some data";
//Save the data in the session storage
window.name = JSON.stringify(objectToPersist);
}
I hope someone finds this useful.

sending data from local context to web context (WINJS)

I have a program where i have a page in the local context and within this page i have got an iframe where the content of it is in the web context. Now I would like to send some data from the local context to the web context. How do i do this.
local
var node = document.createElement("iframe");
node.src = 'ms-appx-web:///pages/mapView/mapView.html?latitude=' + coordinates.latitude + '&longitude=' + coordinates.longitude;
node.style.width = '100%';
node.style.height = '100%';
node.onload = function () {
node.contentWindow.postMessage(JSON.stringify(data), "ms-wwa-web://" +
document.location.host);
}
document.querySelector('#insert').appendChild(node);
in the iframe i do:
window.addEventListener('message', receiveMsg, false);
I have got an ajax call where i got some data, but because i have no access to ajax calls in web context i would like to send some data from this here to mapView.html.
The problem is. I would send some values via Get Parameter, but I have too much data for that.
any help?

Try switching this line:
node.contentWindow.postMessage(JSON.stringify(data), "ms-wwa-web://" +
document.location.host);
... to this:
node.contentWindow.postMessage(JSON.stringify(data), "*");
If that works, you should be ok doing that here in a Win 8 app (wouldn't do that in a web app for security reasons), but if you want to lock it down more I think you'd just need to change the second parameter to be one of:
"ms-www-web:///" (note the triple slash)
"ms-www-web:///pages/"

ASP MVC Javascript link to uri

I have a ASP.NET MVC web application and have a link that can be either a url or link to a file (network share, location file system)
Here is my html....
<span id="link_id">link</span>
Here is my jQuery / Javascript......
jQuery('#link_id').live('click', function() {
var location = jQuery(this).attr('link');
window.open(location, '_blank');
});
However, I can getting an error when the link is not an web address starting with http://.
Is there a way to accomplish this so I can access web urls AND shared drives?

EDIT AFTER COMMENT
First of all, 'link' is not an attribute of <span> tag, so you can't use it like .attr('link');. I would try something like this:
`
jQuery('#link_id').live('click', function() {
var location = jQuery(this).text();
var httpFoundAt=location.search("http://");
var httpsFoundAt =location.search("https://");
if ((httpFoundAt==-1) && (httpsFoundAt==-1) )
{
location='file://' + location;
}
window.open(location);
});
You can check for "www" instead of http or https depending on your use case.