Native js obtains dom elements in iframe--How parent and child pages obtain each other's dom elements from each other-JS Tutorial-php.cn

Native js obtains dom elements in iframe--How parent and child pages obtain each other's dom elements from each other

高洛峰

Release： 2017-02-06 09:33:41

Original

1671 people have browsed it

Use native js to get the elements of the iframe subpage on the parent page, and get the elements of the parent page on the subpage. 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 sub-page div in the parent page to gray, originally 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>demo主页面</title>
    <script type="text/javascript">
    window.onload = function(){
        var _iframe = document.getElementById(&#39;iframeId&#39;).contentWindow;
        var _div =_iframe.document.getElementById(&#39;objId&#39;);
        _div.style.backgroundColor = &#39;#ccc&#39;;
    }
     
    </script>
</head>
 
<body>
 
<div id=&#39;parDiv&#39;>父页面</div>
<iframe src="demo-iframe.html" id="iframeId" height="150" width="150"></iframe> 
</body>
</html>

Copy after login

2. Sub-page (demo-iframe.html), modify the parent page in the sub-page The font color of the page div is red, originally it was 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>子页面demo13-iframe.html</title>
    <script type="text/javascript">
    window.onload = function(){
        var _iframe = window.parent;
        var _div =_iframe.document.getElementById(&#39;parDiv&#39;);
        _div.style.color = &#39;red&#39;;
    }
    </script>
</head>
 
<body>
    <div id=&#39;objId&#39; style=&#39;width:100px;height:100px;background-color:red;&#39;>子页面</div>
</body>
</html>

Copy after login

3. Rendering:

(1) Rendering without adding js:

Native js obtains dom elements in iframe--How parent and child pages obtain each others dom elements from each other

(2) Rendering after adding js:

Native js obtains dom elements in iframe--How parent and child pages obtain each others dom elements from each other

The above native js gets the dom elements in the iframe - the parent and child pages get each other's dom elements from each other The method is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more native js to obtain dom elements in iframe - methods for parent and child pages to obtain each other's dom elements from each other, please pay attention to the PHP Chinese website for related articles!