zai页面中嵌套了一个iframe 框,怎么能够让iframe 中的提示框在整个页面查看,而不是只是在那个框中

Posted 2023-04-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了zai页面中嵌套了一个iframe 框,怎么能够让iframe 中的提示框在整个页面查看,而不是只是在那个框中相关的知识，希望对你有一定的参考价值。

现在我是在iframe中登录但是点击登录显示的提示框只在那个iframe窗口位置，我想让他在整个页面，求大神帮忙啊.....
000

参考技术A 意思是让你的iframe中的一个层在top中显示吧，可以动态在top中创建改层，然后在iframe中调用top的打开方法。追问

问题我补充了，你帮我能改改代码吗，谢谢了，实在是不会弄啊

追答

一、top页面：

.loginLayer
display: none;
width: 300px;
height: 200px;
position: absolute; /* 在什么位置打开自己调整 */
top: 0;
right: 0;
z-index: 100;

function login()
$("body>div.loginLayer").show();

二、iframe页面
登录
function login()
top.login();

参考技术B 用target和name追问

能不能具体点啊，最好写一个简单的例子，target不行，因为不是超链是按钮，name只有一个iframe 怎么命名外页面啊

页面嵌套iframe时，怎样让iframe高度根据自身内容高度自适应

总体思路是这样的，因为iframe里页面的内容是动态加载的，而且电脑屏幕宽度发生变化时，也得相应的去改变iframe标签的高度（如果高度确定就不用这么麻烦了）；

首先，我们在父页面中定义一个方法，用来改变iframe标签的高度；在iframe中的页面中，当内容加载号之后去调用父页面汇总的这个方法（因为要根据内容自适应高度）；

然后再处理，当屏幕发生改变时，在子页面汇总调用父页面汇总的这个方法；

父页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div>sdsd</div>
    <iframe src="./bb.html" scrolling="no" frameborder="0" id="test" style="width:100%;"></iframe>

    <script>
            function setIframeHeight(id){
                var iframe = document.getElementById(id);
                try{
                    var bHeight = iframe.contentWindow.document.body.scrollHeight;
                    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
                    var height = Math.min(bHeight, dHeight);
                    iframe.height = height+20;
                }catch (ex){}
            }
            

    </script>
</body>
</html>

子页面中的代码：这里用一个定时器去模仿异步加载数据所产生的时间差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    我是内敛元素时
    <div id="test"></div>
    
    <script>
　　　　//模拟页面加载来的页面内容
        var html=`<p>达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所大所佛挡杀佛大萨达所</p>`;
    
        var win=window;
        var doc=document;
        function ready(){
            document.querySelector("#test").innerHTML=html;//动态添加页面内容
            parent.window.setIframeHeight("test");//调用父页面中改变 iframe标签高度的方法
        }
        setTimeout(ready,1000);

        var processor={
                timeoutId:null,
                performProcessing:function(){
                    //实际执行的代码
                    parent.window.setIframeHeight("test")
                },
                process:function(){//函数节流
                    clearTimeout(this.timeoutId);
                    var that=this;
                    this.timeoutId=setTimeout(function(){
                            that.performProcessing();
                    },100);
                }
        }
        //使用 当窗口发生改变时调用
        window.onresize=function(){
            processor.process();
        }

        
        
    </script>
</body>
</html>

这里面用到了函数节流 iframe中调用父页面方法的知识点

以上是关于zai页面中嵌套了一个iframe 框,怎么能够让iframe 中的提示框在整个页面查看,而不是只是在那个框中的主要内容，如果未能解决你的问题，请参考以下文章

https页面iframe嵌套http的页面，弹出警告，怎么解决

iframe 嵌套页面，怎么能让整体页面跳转到另的页面去呢？

HTML 中嵌套iframe 不断刷新登录页面，此页面会过期，如果会，怎么解决

js查找嵌套iframe的问题