iframe-父子-兄弟頁面相互傳值(jq和js兩種方法)

本文轉載自查看原文 2019-08-27 13:29 1357 前端問題集錦/ 前端-Html5知識點

轉載於：https://blog.csdn.net/u013299635/article/details/78773207

效果圖：（注意url協議不能以 filter:/ 開頭）

1.父級html源碼：

main.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>main</title>
<style type="text/css">
    iframe{float:left;width:48%;height:500px;margin-left:1%;border:1px solid #eee;background:#ddd;display:table-cell;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    var gg="這是main.html變量";
    function ggMM() {
        console.log(gg);
    }
    function callIframeMethod() {
        // js
        document.getElementById("frame").contentWindow.test();
        // jq
        $("#frame")[0].contentWindow.test(); //用jquery調用需要加一個[0]
    }
    function callIframeField() {
        // 以下兩種方法可以達到同樣的效果
        console.log($("#frame")[0].contentWindow.ff);
        console.log(frame.window.ff);
    }
    function callIframeHtml() {
        // 以下兩種方法可以達到同樣的效果
        console.log($("#frame")[0].contentWindow.$("#dd").val());
        console.log(frame.window.$("#dd").val());
 
        var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
        console.log(t);
 
        // var t = document.getElementById('frame').contentWindow.document.getElementById('dd');
 
        //console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);
        //console.log($("#frame")[0].contentWindow.document.getElementById("dd").value);                
    }    
    function giveParameter() {
        $("#frame")[0].contentWindow.hellobaby="dsafdsafsdafsdafsdafsdafsadfsadfsdafsadfdsaffdsaaaaaaaaaaaaa";
    }
</script>
</head>
<body>
    <a href="#" onClick="giveParameter();">參數傳遞</a>
    <a href="#" onClick="callIframeMethod();">調用子iframe方法</a>
    <a href="#" onClick="callIframeField();">調用子iframe變量</a>
    <a href="#" onClick="callIframeHtml();">調用子iframe組件</a></br>    
    <iframe id="frame" name="frame" src="frame.htm" frameborder="0"></iframe>
    <iframe id="newFrame" name="newFrame" src="newFrame.htm" frameborder="0"></iframe>
</body>
</html>

2.子頁面

frame.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>frame</title>
<style type="text/css">
    a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
 
var ff="adfdasfdsafdsafdsaf";
function test() {
    console.log($("#dd").val());
}
function callMainField() {
    console.log(parent.gg);
}
function callMainMethod() {
    parent.ggMM();
}
function callMainHtml() {
    console.log(parent.$("#frame").attr("id"));
}
function getParameter() {
    console.log(window.hellobaby);
}
 
function ss(){
    console.log('這是frame方法');
    console.log(ff)
}
</script>
</head>
<body>
    <h1>frame</h1>
    <a href="#" onClick="getParameter();">接受參數</a>
    <a href="#" onClick="callMainMethod();">調用父級方法，並且打印父級變量</a>
    <a href="#" onClick="callMainField();">調用主窗口變量</a>
    <a href="#" onClick="callMainHtml();">調用子iframe組件</a>    
    <input id="dd" type="text" value="1111111111"/>
</body>
</html>

3.子頁面中嵌套的頁面

newFranme.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在frame里嵌套frame</title>
<style type="text/css">
    input,a{display: block;line-height:30px;}
    iframe{
        float:left;
        width:48%;height:250px;margin-top:40px;background:#abc;border:1px solid blue; 
    }
    #newFrame2{ float:right; }
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var newFrame = {
    name:'這是newFrame的變量值',
};
function callLevelFrame() {
    var ff=parent.$("#frame")[0].contentWindow.ff;
    parent.$("#frame")[0].contentWindow.ss();
    console.log('parent.$("#frame")[0].contentWindow.ff: '+ff);
}
function callLevelFrame1() {
    console.log($("#newFrame1")[0].contentWindow.iframe1);
}
 
function frameFn(){
    console.log('這是frame里面的方法franmeFn');
}
$(function(){
    // setTimeout(function(){
    //     // console.log(parent.$("#frame"))
    //     // console.log(parent.$("#frame")[0].contentWindow.ss())
    //     // console.log(parent.document.getElementById('frame').contentWindow.ss());
    // },500)
})
    
</script>
</head>
<body>
    <h1>newFrame</h1>
    <a href="#" onClick="callLevelFrame();">調用兄弟iframe</a>    
    <a href="#" onClick="callLevelFrame1();">調用自己的子頁面iframe1變量</a>    
    <input id="nn" type="text" value="sdafsdfsa"/>
 
    <iframe id="newFrame1" name="newFrame1" src="newFrame1.htm" frameborder="0"></iframe>
    <iframe id="newFrame2" name="newFrame2" src="newFrame2.htm" frameborder="0"></iframe>
</body>
</html>

4.子頁面的子頁面中嵌套的頁面

newFram1.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
    a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe1的變量';
function callnewFramFn() {
    // js
    parent.parent.document.getElementById('newFrame').contentWindow.frameFn();
    // jq
    parent.parent.$("#newFrame")[0].contentWindow.frameFn();
 
 
}
 
function callnewFramParam(){
    console.log(parent.parent.document.getElementById('newFrame').contentWindow.newFrame);
}
// $(function(){
//     setTimeout(function(){
//         // console.log(parent.parent.$("#newFrame")[0])
//         // console.log(parent.$("#newFrame")[0].contentWindow.ss())
//         // console.log(parent.document.getElementById('newFrame').contentWindow.ss());
//     },500)
// })
 
function frame1(){
    console.log(iframe1);
    parent.$("#newFrame2")[0].contentWindow.$('#nn2').val(iframe1);
}
</script>
</head>
<body>
    <h1>newFrame1</h1>
    <a href="#" onClick="callnewFramFn();">調用newFram方法</a>    
    <a href="#" onClick="callnewFramParam();">調用newFram變量</a>    
    <input id="nn" type="text" value="這是newFrame1的input值"/>
</body>
</html>

5.子頁面的子頁面中嵌套的頁面

newFram2.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>newFrame1</title>
<style type="text/css">
    a{display: block;line-height:30px;}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var iframe1 = '我是iframe2的變量';
function callnewFramFn1() {
    parent.$("#newFrame1")[0].contentWindow.frame1();
    console.log(parent.$('#newFrame1'));
}
 
    
</script>
</head>
<body>
    <h1>newFrame2</h1>
    <a href="#" onClick="callnewFramFn1();">調用newFram1方法</a>    
    <input id="nn2" type="text" value="這是newFrame1的input值"/>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 layui 彈窗的iframe 父子界面相互傳值 layui 彈窗的iframe 父子界面相互傳值關於使用iframe的父子頁面進行簡單的相互傳值使用jquery的ligerui實現彈出窗（父子頁面相互傳值）基於iframe父子頁面傳值的方法。 uniapp內嵌H5頁面和uniapp頁面相互傳值 iframe父頁面和子頁面相互調用的方法 VUE中的子父組件、兄弟組件之間相互傳值，相互調用彼此的方法 js和vue方法的相互調用（iframe父子頁面的方法相互調用）。 angular父子組件相互傳值