Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js创建数据共享接口——简化框架之间相互传值_javascript技巧

js创建数据共享接口——简化框架之间相互传值_javascript技巧

WBOY
Freigeben： 2016-05-16 18:00:24
Original
1120 Leute haben es durchsucht

很多框架存在父子关系，操作起来十分麻烦，很多同学经常出现这样悲催的代码：

复制代码 代码如下:

window.parent.document.getElementById("main")
.contentWindow.document.getElementById('input').value =
document.getElementById('myIframe')
.contentWindow.document.getElementById('s0').value;

其实这个问题可以被大大的简化，框架应用中有一个固定不变的窗口叫window.top，如果我们把数据缓存到这个页面，其下所有框架都可以获取到，无论子页面如何变幻。不需要采用Cookie，也不需要采用什么HTML5本地数据库策略，你只需要每个页面引用一个js文件，内容如下：
复制代码 代码如下:

var share = {
/**
* 跨框架数据共享接口
* @param {String} 存储的数据名
* @param {Any} 将要存储的任意数据(无此项则返回被查询的数据)
*/
data: function (name, value) {
var top = window.top,
cache = top['_CACHE'] || {};
top['_CACHE'] = cache;
return value ? cache[name] = value : cache[name];
},
/**
* 数据共享删除接口
* @param {String} 删除的数据名
*/
removeData: function (name) {
var cache = window.top['_CACHE'];
if (cache && cache[name]) delete cache[name];
}
};

这个寥寥数行的方法可以共享任意类型的数据供各个框架页面读取，它与页面名称、层级毫无关系，就算哪天框架页面层级被修改，你也完全不用担心，它可正常工作。
例如，如我们可以在A页面存入共享数据：
复制代码 代码如下:

share.data(‘myblog', ‘http://www.jb51.net');
share.data(‘editTitle', function (val) {
document.title = val;
});

然后某框架页面任意取A页面的数据
复制代码 代码如下:

alert(‘我的博客地址是： ‘ + share.data(‘myblog');
var editTitle = share.data(‘editTitle');
editTitle(‘我已经获取到了数据');

对，就这么简单！你还可以在artDialog 的iframeTools扩展中看到此技术身影。
Verwandte Etiketten：
传值
Quelle：php.cn
Vorheriger Artikel：jquery.fileEveryWhere.js 一个跨浏览器的file显示插件_jquery Nächster Artikel：javascript模版引擎-tmpl的bug修复与性能优化分析_javascript技巧
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Starten Sie einen transparenten Browser, um das Erlebnis von Webanwendungen und PWA zu verbessern [unterstützt statisches HTML, CSS und JavaScript] [Benutzern die Anzeige von Desktop-Hintergründen in unseren Webanwendungen/PWA ermöglichen] Ich bin ein Junior-Frontend-Entwickler und Designer, der derzeit eine Webanwendung (Chat) ...
Aus 2024-04-05 13:50:12
0
1
1367
Wie optimiere ich diese Karten, damit sie mit Boostrap 4 reagieren? Wie kann ich dafür sorgen, dass in jeder Reihe 4 Karten angezeigt werden und diese natürli...
Aus 2024-04-05 10:48:45
0
1
4072
PHP-HTTP-Anfrage ignoriert Parameter Bevor ich anfange, Fragen zu stellen, sollte ich erwähnen, dass ich PHP nach langer Zeit w...
Aus 2024-04-05 10:54:48
0
1
3536
Ich versuche, Werte in zwei Spalten in zwei verschiedenen Tabellen zu vergleichen Ich habe zwei Tabellen, TabelleA und TabelleB. Tabelle A hat 4 Spalten, während Tabelle B ...
Aus 2024-04-04 20:05:03
0
1
280
Benötigen Sie Hilfe beim Erstellen einer Methode, die den frühesten Datumswert zurückgibt? Ich überarbeite eine Methode für eine alte Codebasis, die ich übernommen habe. Diese Metho...
Aus 2024-04-04 19:51:19
0
1
1344
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage