There is also a problem encountered in the project:
There are a.html and b.html.
1. Page a has been opened, but page b has not been opened yet. I hope to set some column parameters on page a, such as background color, width and other parameters, and pass it to page b so that page b can be applied when it is opened.
2. Page a has been opened, page b is open or not. On page a, you need to get some elements and even variables from page b to facilitate application to page a.
Note: No cross-domain issues are involved.
After thinking for a long time, I finally thought of the solution.
The first question is that we can use the characteristics of the html page anchor point to pass the parameters to the b page through the url
This is the page code:
<button>Jump settings</button><script>var btn = document.querySelector('button');console.log(window);btn.addEventListener('click', function(){window.location = 'ci.html#bgc=#369?wd=500'})</script>From the code, you can know that when you click the button to jump to the page, there are a series of parameters after the jumped url, which will not affect the jump address. When page b is opened, you can obtain the location intercepted string to obtain variables and variable values, and then apply it.
This is the b page code:
<div></div><script>var div = document.querySelector('div');var bl = window.location.hash.slice(1).split('?');if(bl.length >= 1){for(var i = 0; i < bl.length; i += 1){switch (bl[i].split('=')[0]) {case 'bgc':document.body.style.background = bl[i].split('=')[1];break;case 'wd':div.style.width = bl[i].split('=')[1] + 'px';break;default:null;break;}} }</script>By intercepting the string, get the variable application passed by the url. success!
The second question is that I think of achieving the goal through iframes, which is just a trick.
Dynamically create an iframe on page a, and set the src value to page b, and display is none. Then, use the contentDocument property of the iframe to get the returned iframe document.
Get the required elements in the document and apply them.
Source code:
<span>1111111111111</span><script>var fram = document.createElement('iframe');fram.src = 'http://www.vip.com/kongzhi/fram2.html';fram.style.display = 'none';document.body.appendChild(fram);fram.onload = function(){var doc = fram.contentDocument || fram.contentWindow.document;var p = doc.querySelector('p');document.body.appendChild(p);}</script>The above is the JS control static page that I introduced to you, and the parameters are passed and obtained. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!