Heim > Artikel > Web-Frontend > js-Kommunikation zwischen Iframe-Unterseite und übergeordneter Seite in derselben Domäne oder unterschiedlichen Domänen_Javascript-Kenntnisse
js-Kommunikation zwischen Iframe-Unterseite und übergeordneter Seite in derselben Domäne oder unterschiedlichen Domänen_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 16:49:381102Durchsuche
Die Kommunikationsmethoden zwischen Iframe-Unterseiten und übergeordneten Seiten variieren je nachdem, ob das src-Attribut im Iframe ein Link zur gleichen Domäne oder ein domänenübergreifender Link ist.

1. Kommunikation zwischen übergeordneten und untergeordneten Seiten in derselben Domäne

Übergeordnete Seite parent.html
Code kopieren Der Code lautet wie folgt:
 
 
 
 input id="button" type="button" value="Aufruf der Funktion say()" in child.html onclick="callChild()"/&lt ;/iframe> <br></body> <br></html> <br><br> <br>Unterseite child.html <br><br><br> <br><br>Code kopieren</div>
<br><br> Der Code lautet wie folgt:<div class="codetitle">
<span> <a style="CURSOR: pointer" data="3691" class="copybut" id="copybut3691" onclick="doCopy('code3691')"><html><head> ="text/javascript"> <u>function say(){ </u>alert("child.html"} </a>function callParent(){ </span>parent.say(); 🎜>parent.window.document.getElementById( "button").value="Anruf endet" </div></script> <div class="codebody" id="code3691"><body> 🎜><input id="button" type="button" value="Rufen Sie die Funktion say() in parent.html auf" onclick="callParent()"/> </html> <br><br> <br>Methodenaufruf<br><br>Die übergeordnete Seite ruft die Methode der untergeordneten Seite auf: FrameName.window.childMethod(); <br><br>Die untergeordnete Seite ruft auf Methode der übergeordneten Seite: parent.window.parentMethod(); <br>DOM-Elementzugriff<br><br>Nachdem Sie das window.document-Objekt der Seite erhalten haben, können Sie auf das DOM-Element zugreifen<br>Notizen<br><br>Stellen Sie sicher, dass Sie den Vorgang ausführen, nachdem der Iframe geladen wurde. Wenn Sie mit dem Aufrufen von Methoden oder Variablen beginnen, bevor der Ladevorgang abgeschlossen ist, tritt ein Fehler auf. Es gibt zwei Möglichkeiten, um festzustellen, ob der Iframe geladen wurde: <br><br>1. Verwenden Sie das Onload-Ereignis auf dem Iframe <br><br> 2. Verwenden Sie document.readyState=="complete", um </div> zu ermitteln <br><br>2. Domänenübergreifende Kommunikationsmethode für übergeordnete und untergeordnete Seiten <br> <br><br>Wenn der Iframe mit einer externen Seite verknüpft ist, kann die Kommunikationsmethode unter demselben Domänennamen nicht verwendet werden Sicherheitsmechanismus. <br>Die übergeordnete Seite leitet Daten an die untergeordnete Seite weiter <br><br>Der Trick besteht darin, den Hashwert des Standortobjekts zu verwenden und die Kommunikationsdaten darüber weiterzuleiten. Fügen Sie einfach eine zusätzliche Datenzeichenfolge nach dem src des Iframes auf der übergeordneten Seite hinzu, und dann können Sie die Daten hier auf irgendeine Weise sofort abrufen, zum Beispiel: <br><br>1 Pass in Unterseite Die setInterval-Methode stellt den Timer ein und überwacht Änderungen in location.href, um die oben genannten Dateninformationen zu erhalten <br><br>2 Dann führt die untergeordnete Seite basierend auf diesen Dateninformationen eine entsprechende logische Verarbeitung durch <br><br>Die Die untergeordnete Seite berichtet an die übergeordnete Seite. Die Technik zum Übergeben von Daten <br><br> besteht darin, einen Proxy-Iframe zu verwenden, der in die untergeordnete Seite eingebettet ist und in derselben Domäne wie die übergeordnete Seite bleiben muss und dann die Implementierung vollständig nutzt Prinzip der ersten Kommunikationsmethode oben: Die Daten der Seite werden an den Proxy-Iframe übergeben. Da sich der Proxy-Iframe und die Hauptseite in derselben Domäne befinden, kann die Hauptseite die Daten über denselben abrufen Domänenmethode. Verwenden Sie window.top oder window.parent.parent, um einen Verweis auf das Fensterobjekt der obersten Ebene des Browsers abzurufen.</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Einfacher JS-Bildrotationscode (JS-Bildkarussell)_Javascript-Kenntnisse" href="http://m.php.cn/de/faq/13111.html">Einfacher JS-Bildrotationscode (JS-Bildkarussell)_Javascript-Kenntnisse</a></span><span>Nächster Artikel：<a class="dBlack" title="Einfacher JS-Bildrotationscode (JS-Bildkarussell)_Javascript-Kenntnisse" href="http://m.php.cn/de/faq/13113.html">Einfacher JS-Bildrotationscode (JS-Bildkarussell)_Javascript-Kenntnisse</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai"  >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:setlang('en');" class="language course-right-orders chooselan "  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a  onclick="javascript:setlang('ja');" class="language course-right-orders chooselan "  href="javascript:;"><span>日本語</span><span>（JA）</span></a><a  onclick="javascript:setlang('ko');" class="language course-right-orders chooselan "  href="javascript:;"><span>한국어</span><span>（KO）</span></a><a  onclick="javascript:setlang('ms');" class="language course-right-orders chooselan "  href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a  onclick="javascript:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>（FR）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

            });
        </script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

            _self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>