1. HTML 节点 并给src 赋值页面所在的相对路径
// 可以直接给src赋值,也可以通过js进行赋值 <iframe id="iframeConatiner" src=""></iframe> <iframe id="iframeConatiner" src="页面所在的相对路径"></iframe> <script> $(function () { $("#iframeConatiner").attr("src", 页面相对路径) }); </script>
子页面调用父页面方法
1. 父页面方法
var loop=1; // 获取到html节点的iframe个数 loop = $("iframe").length; // 每个页面加载完毕才调用获取时间方法 function reduce() { loop--; if (loop == 0) { getTime(); } }
2. 子页面使用
// 初始化调用只调用一次 interBool =true; $(function () { if (interBool) { // 父页面的方法 parent.reduce(); interBool = false } }
3. 页面循环轮播自动切换
function getTime() { $.ajax({ url:'地址', type: 'get', dataType: 'json', success: function (result) { var time = parseInt(result.data.times * 1000) // 1. 让所有iframe隐藏 // 2. 给第一个iframe添加一个类并显示 $("iframe").hide(); $("iframe:eq(0)").addClass("current").show(); if (time != 0) { // clearInterval() setTimeout(start(time), time); } } }); } function start(time) { setInterval(function () { // 获取到当前类的节点并removeClass隐藏并获取他的下标 var index = $(".current").removeClass("current").hide().index(); var next = $("iframe:eq(" + (index + 1) + ")"); if (next.length == 0) { next = $("iframe:eq(0)"); } next.addClass("current").show(); }, time) }