使用iframe遇到的问题

最新推荐文章于 2024-03-25 16:14:51 发布

1990_super

最新推荐文章于 2024-03-25 16:14:51 发布

阅读量1.7k

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/runbat/article/details/81502133

版权

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了在一个页面中嵌入两个iframe（其中一个跨域）的应用场景，面对跨域DOM元素获取、AJAX返回值使用及子页面调用父页面方法等问题，提出了具体解决方案，包括使用window对象绑定方法、设置AJAX同步及提升方法定义至全局变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景介绍：

1、需要在一个页面嵌入两个页面，假设叫做A和B，其中A一个还是跨域的

2、B页面有个【通过】按钮，点击时后台ajax取数据id，然后刷新A和B页面

问题1: 跨域的A页面无法获取A页面Dom元素

问题2:ajax返回值不能被方法外部使用

问题3:B页面无法获取父页面的方法（这个是我自己瞎搞出来的问题）

代码如下图，然后分析解决我的问题

问题1：这个跨域问题确实没法解决，但是可以由A页面提供一个绑定在window对象的方法来给本页面调用。实际也是可行的

问题2：ajax默认是异步的，所以设置为同步async:false 即可

问题3：这样问题由于我习惯写法 $（document）.ready(function(){}) 本意是等页面dom元素加载完在执行，这是工作养成的一个习惯，一般来说，引入的js都放到页面底部，按照浏览器加载的顺序应该肯定会被加载完dom才执行js的，我的习惯引发了问题3，单这个问题也好解决，要么把document.ready去掉，要么把方法的定义提升为全局变量。就像现在下面代码里写的。

另外：子页面调用父页面方法是 window.parent.refreshAndGetNext();

document对象是值得页面dom，window是页面的全局的方法属性之类的

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<iframe id="h2" src="" style="width:60%; height:900px"></iframe>
<iframe id="max" src="" style="width:39%; height: 900px"></iframe>
</body>
<script src="<@parameter key='cdn.url'/>/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
// 定义全局方法，使子页面可调用
var refreshAndGetNext;
var getNext;
$(document).ready(function() {
    // 定义全局变量
    var frameH2 = window.frames["h2"];
    var frameMax = window.frames["max"];
    var h2Domain = "";
    var maxDomain = "";
    // 分辨当前环境
    var domain = new RegExp(document.domain);
    if(domain.test("max.xxx.com")) {
                // 省略。。
    } else if(domain.test("max.xxx.cn")) {
                // 省略。。
    } else {
                // 省略。。
    }
    getNext = function() {
        var result = 0;
        $.ajax({
            url:'${mpath}/print/check/next',
            async:false,
            dataType:'json',
            complete : function(data) {
                result = data.responseJSON;
            }
        });
        return result;
    }
    // max页面审核通过后调用这个方法，获取下一条审核数据
    refreshAndGetNext = function() {
        // 获取数据
        var printId = getNext();
        if(printId == 0) {
            alert('审核队列已清空，恭喜完成审核任务！！！给你点赞！');
            return;
        }
        // 刷新h2
        frameH2.src =  h2Domain + printId;
        // 刷新max
        frameMax.src = maxDomain + printId;
    }

    //加载子页面
    refreshAndGetNext();
});

</script>
</html>