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 is already open, 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 simple example of passing parameters between static pages to obtain parameters and applying them is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.