Home > Article > Web Front-end > Native js obtains dom elements in iframe--How parent and child pages obtain each other's dom elements from each other

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

高洛峰Original: 2017-02-06 09:33:411722browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js loading uses DOM method to dynamically load Javascript filesNext article：js loading uses DOM method to dynamically load Javascript files

See more

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

Related articles