Native js obtient les éléments dom dans iframe - Comment les pages parent et enfant obtiennent les éléments dom les unes des autres-js tutoriel-php.cn

Native js obtient les éléments dom dans iframe - Comment les pages parent et enfant obtiennent les éléments dom les unes des autres

高洛峰

Libérer： 2017-02-06 09:33:41

original

1762 Les gens l'ont consulté

Utilisez du js natif pour récupérer les éléments de la sous-page iframe sur la page parent, et récupérer les éléments de la page parent sur la sous-page. Voici un exemple pour résumer :

1 , page parent (demo.html), modifiez la couleur de fond de la sous-page div dans la page parent en gris, à l'origine rouge :

<!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>

Copier après la connexion

2. Sous-page (démo- iframe.html), dans la sous-page Modifier la couleur de police de la page parent div en rouge au lieu de noir :

<!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>

Copier après la connexion

3. Rendu :

(1) Rendu sans ajout js :

Native js obtient les éléments dom dans iframe - Comment les pages parent et enfant obtiennent les éléments dom les unes des autres

(2) Rendu après l'ajout de js :

Native js obtient les éléments dom dans iframe - Comment les pages parent et enfant obtiennent les éléments dom les unes des autres

Le js natif ci-dessus obtient l'élément dom dans le iframe - la page parent-enfant mutuellement La méthode pour obtenir les éléments dom de l'autre partie est tout le contenu partagé par l'éditeur, j'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Plus de js natifs pour obtenir des éléments dom dans iframe - méthodes pour les pages parents et enfants pour obtenir les éléments dom les unes des autres Pour les articles connexes, veuillez faire attention au site Web PHP chinois !