js creates data sharing interface - simplifying mutual value transfer between frameworks_javascript skills

Many frameworks have a parent-child relationship, which is very troublesome to operate. Many students often have such miserable codes:

Copy code The code is as follows:

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

In fact, this problem can be greatly simplified. There is a fixed window called window.top in the framework application. If we Cache the data to this page, and all frames under it can be obtained, no matter how the sub-pages change. There is no need to use cookies or any HTML5 local database strategy. You only need to reference a js file for each page, with the following content:

Copy code The code is as follows:

var share = {
/**
* Cross-frame data sharing interface
* @param {String} The name of the stored data
* @param {Any} Any data to be stored (without this item, the queried data will be returned)
*/
data: function (name, value) {
var top = window.top,
cache = top['_CACHE'] || {};
top['_CACHE'] = cache;
return value ? cache[name] = value : cache[name];
},
/**
* Data sharing deletion interface
* @param {String} deleted data name
*/
removeData: function (name) {
var cache = window.top['_CACHE'];
if (cache && cache[ name]) delete cache[name];
}
};

This method with only a few lines can share any type of data for each frame page to read. It is related to the page name , level has nothing to do with it. Even if the frame page level is modified one day, you don’t have to worry at all, it will work normally.
For example, if we can store shared data on page A:

Copy the code The code is as follows:

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

Then a frame page randomly takes the data of page A

Copy code The code is as follows:

alert('My blog address is: ' share.data('myblog');
var editTitle = share.data('editTitle');
editTitle('I have obtained the data');

Yes, it's that simple! You can also see this technology in the iframeTools extension of artDialog.