概述和原始问题
window.name是一个有趣的野兽.MDN的描述暗示了原始意图:
窗口名称主要用于设置超链接和表单的目标.Windows不需要名称.
所以,这意味着我们可以在这个窗口中打开控制台,并写道:
var win = window.open('http://google.com', 'el goog');
Run Code Online (Sandbox Code Playgroud)
...然后让它通过弹出窗口拦截器,它应该在一个名为"el goog"的窗口中打开google.com.由于同源策略,我无法访问name
属性win
,但如果我在新窗口中打开一个控制台并输入name
,我就会得到"el goog"
.
如果我将窗口发送回我打开它的域(在这种情况下是stackoverflow.com),我可以获取name
属性,但它没有改变.
win.location.replace(location.href);
win.name; // "el goog"
Run Code Online (Sandbox Code Playgroud)
这意味着我们可以通过设置name
窗口的属性来拥有一种跨域会话存储.
如果google.com 在窗口被发送回原始域之前更改了值window.name
,我们会看到新值而不是"el goog".这可以用作跨域数据传输,类似于JSONP或CORS的实用程序.
我做了一些搜索试图找到更多的信息,显然道场认为它是合法的运输.但不知何故,这并不能完全让我放心.所以我的问题是,任何信誉良好的网站都window.name
用作数据传输吗?我认为它很容易被发现,因为他们的文档会对JSONP的查询字符串说" 添加回调",或者为window.name添加'what',但我从未见过这样的东西.有没有人在野外发现过这个?
替代问题
可能是没有人真正使用这种技术; 如果那是真的那么(正如Rob W指出的那样)上面的问题是无法回答的.所以,我的另一个问题是,这种方法有什么问题?这可能有助于解释为什么它没有被真正采用.
我认为,与JSONP相比,这种方法至少有两个好处.
使用JSONP,您可以信任来自外地的脚本在您的域上运行.使用window.name
,恶意站点包含的任何脚本都可以在自己的域上运行.
使用JSONP,无法传递大数据(对于URL来说太大了),也无法进行HTTP POST.有了window.name
,我们可以发布任意大小的任意数据.
有什么缺点?
示例实现
这是客户端实现的一个非常简单的示例.这不处理POST请求,只处理GET.
function fetchData(url, callback) {
var frame = document.createElement('iframe');
frame.onload = function() {
frame.onload = function() { …
Run Code Online (Sandbox Code Playgroud) 我的主要目标是:
转到我的应用程序,在新选项卡中打开一个链接,在新选项卡中创建一些内容并将事件发送到父主选项卡进行刷新.
我学到了两种技术并没有完全符合我的需要:
如何使用制表符将事件从子节点传递给父节点?我很高兴在父母和孩子的javascript代码的具体示例.它应该适用于跨域(例如:www.mydomain.com和bills.mydomain.com).
有没有我错过的jQuery解决方案?
我正在尝试将一些对象传递给新的浏览器窗口。我遵循了AngularJS的建议:打开一个新的浏览器窗口,但仍然保留范围和控制器以及服务
它适用于 Chrome,但不适用于 IE。我的共享对象在 IE上始终未定义。有什么建议?
我正在尝试做的简化版本的代码
我的父母 html
<html ng-app="SampleAngularApp">
<body>
<div ng-controller="popupCtrl">
<my-popup foo="foo" abc="abc">Open Popup from here</my-popup>
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我的父母 JS
var SampleAngularApp = angular.module('SampleAngularApp', []);
var popupCtrl = function ($scope) {
$scope.foo = { baz: 'qux' };
$scope.abc = "12345";
};
SampleAngularApp.directive('myPopup', ['$window', function ($window) {
return {
restrict: 'EA',
scope: {
foo: '=',
abc: '='
},
link: function (scope, elem, attrs) {
elem.css({ 'cursor': 'pointer' });
elem.bind('click', function () { …
Run Code Online (Sandbox Code Playgroud)