Use native js to get the elements of the iframe child page on the parent page and to get the elements of the parent page on the child page. This is a method that is often used. Here is an example to summarize:
1. Parent page (demo.html) , modify the background color of the child page div on the parent page to be gray, and it turns out to be red:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>demoMain Page</title><script type="text/javascript">window.onload = function(){var _iframe = document.getElementById('iframeId').contentWindow;var _div =_iframe.document.getElementById('objId');_div.style.backgroundColor = '#ccc';}</script></head><body><div id='parDiv'>Parent page</div><iframe src="demo-iframe.html" id="iframeId"></iframe> </body></html>2. Subpage (demo-iframe.html) , modify the font color of the parent page div on the child page to be red, and it turns out to be black:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Subpage demo13-iframe.html</title><script type="text/javascript">window.onload = function(){var _iframe = window.parent;var _div =_iframe.document.getElementById('parDiv');_div.style.color = 'red';}</script></head><body><div id='objId' style='width:100px;height:100px;background-color:red;'>Subpage</div></body></html>3. Reproduction diagram:
(1) The renderings when js is not added:
(2) The rendering after adding js:
The above article "Native JS" obtains the dom elements in the iframe - the father and son pages get each other's dom elements is all the content shared by the editor. I hope it can give you a reference, and I hope everyone can support Wulin.com more.