导航:首页 > 编程语言 > iframejs

iframejs

 发布时间：2023-06-27 04:38:09

① 页面如何在加载的时候就调用iframe内的js方法

其实iframe是一个独立的页面，与父页面是嵌套但变量独立的关系。所以iframe加载时，如果js方法不涉及操作文档对象（DOM），就直接调用；如果该js方法涉及操作dom，就添加window.onload事件触发函数处理，在处理函数内调用js方法

② js中监听iframe点击事件

在js中，需要监听iframe的点击事件，但是因为浏览器的同源策略，是无法监听到的，只能另辟蹊径去解决它

注意，仅限于pc网站，意思就是必须要有鼠标移入移出iframe的操作

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Detect IFrame Clicks</title>

<script src="./jquery-3.4.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        var currentObj=Object

        var isOverIFrame = false;

        function processMouseOut(e) {

            console.log('out iframe',e.target);

            currentObj=e.target

            isOverIFrame = false;

            top.focus();

        }

        function processMouseOver(e) {

            // log("IFrame mouse >> OVER << detected.");

            console.log('in iframe',e.target);

            currentObj=e.target

            isOverIFrame = true;

        }

        function processIFrameClick(event) {

            if(isOverIFrame) {

                console.log('click iframe',event.target,currentObj);

            }

        }

        function attachOnloadEvent(func, obj) {

            if(typeof window.addEventListener != 'undefined') {

                window.addEventListener('load', func, false);

            } else if (typeof document.addEventListener != 'undefined') {

                document.addEventListener('load', func, false);

            } else if (typeof window.attachEvent != 'undefined') {

                window.attachEvent('onload', func);

            } else {

                if (typeof window.onload == 'function') {

                    var oldonload = onload;

                    window.onload = function() {

                        oldonload();

                        func();

                    };

                } else {

                    window.onload = func;

                }

            }

        }

        function init() {

            var element = document.getElementsByTagName("iframe");

            for (var i=0; i<element.length; i++) {

                element[i].onmouseover = processMouseOver;

                element[i].onmouseout = processMouseOut;

            }

            if (typeof window.attachEvent != 'undefined') {

                top.attachEvent('onblur', processIFrameClick);

            }

            else if (typeof window.addEventListener != 'undefined') {

                top.addEventListener('blur', processIFrameClick, false);

            }

        }

        attachOnloadEvent(init);

    });

</script>

</head>

<body>

<iframe src="https://www.hao123.com" width="80%" height="600px"></iframe>

<iframe src="https://www..com" width="80%" height="600px"></iframe>

</form>

</body>

</html>

复制上边整段html，打开console控制台，即可解决这个问题，亲测好用

③ iframe中的页面怎么引用js文件

调用父窗口函数
window.parent.POPUP('bigFram');
父窗口调用iframe子窗口方版法权
<iframe name="myFrame" src="child.html"></iframe>
myFrame.window.functionName();
iframe子窗口调用父窗口方法
parent.functionName();
用js互相调用iframe页面内的js函数。

④ js如何关闭弹出的iframe

首先iframe中的页面应该与父页面是同域页面，否则跨域的话js无法控制iframe中的内容。版
如果父页面与框架中的页面时权同域的，可以通过改变a标签的href属性来实现：

1

<a href="javascript:return false;" onclick="window.open('http://..com/','_self')" target="_blank">猛戳这里</a>

这样实际是把原来链接的作用取消，然后给a标签绑定js的window.open方法打开页面，target也就不起作用了。

⑤ js如何操作iframe的跨域问题

A域名下的页面index.htm中内嵌了一个iframe页面，iframe内引用的是B域名的sub-index.htm页面，但是为了避免出
现在index.htm页面中出现滚动条，需要明确知道sub-index.htm页面的高度和宽度，可是sub-index.htm的页面内容是不可控的，可能会根据不同用户页面大小会不一样；问题就是如何把sub-index.htm页面的高度和宽度传递给index.htm页面？

具体解决：
1、在index.htm页面中声明一个js函数process(height, width);用来实现设置页面内iframe的高度和宽度；
2、
在sub-index.htm页面中再内嵌一个隐藏的iframe，iframe的src指向A域名下的页面ex.htm?height=xx&
width=yy，该页面没有任何内容，只是用来传递sub-index.htm页面加载完之后的宽度和高度这两个数据的，页面内js拿到request
中的参数之后直接调用parent.parent.process(height, width);完成对父页面宽度和高度的设置；
如图：

⑥ 如何用js打印 iframe里面的内容

varf=document.getElementById('iframe-id');//获取到iframe标签元素
varwin=f.contentWindow;//iframe中的window对象
vardoc=f.contentDocument;//iframe中的document对象
vartext=doc.getElementsByTagName("html")[0].innerHTML;//获取html标签下的内容

⑦ 如何用JS获取iframe里面的内容

js 跨域名是取不到iframe里的信息的, 除非同一个域名下.
如果是同一个域名下的.
var win = document.getElementById('frmid').contentWindow;
var frmobj = win.document.getElementById('控件');

阅读全文

与iframejs相关的资料

热点内容
苹果app开发工具 浏览：963
学生基本信息填改删html代码 浏览：633
网站源代码程序 浏览：767
动态屏保程序 浏览：995
wps多个数据怎么做并集 浏览：296
matlab中编程为什么要分行 浏览：416
如何添加word打印pdf文件在哪里 浏览：625
编程器读取的数据在哪里找 浏览：277
如何处理bet数据 浏览：94
java线程数据交互 浏览：698
淘宝改不了密码 浏览：344
做台湾网站钱被自动提款了怎么办 浏览：206
苹果6怎么关闭程序 浏览：913
thinkpadr400笔记本拆机教程 浏览：71
贝尔金boost数据线怎么样 浏览：723
115苹果app什么时候上架 浏览：70
如何让附近移动数据变差 浏览：1000
mysql视图教程 浏览：720
10010弹出初始密码 浏览：791
提前还部分房贷建行app里面怎么操作 浏览：408

友情链接