导航:首页 > 编程语言 > 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里面的内容
如果iframe的域名与外部父网页的域名相同（具体请参考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标签下的内容如果iframe的域名与外部父网页的域名不相同，则父网页与子网页由于js同源策略而相互隔离，不允许互相访问。这是由于浏览器的安全性决定的，无法改变。
⑦ 如何用JS获取iframe里面的内容
js 跨域名是取不到iframe里的信息的, 除非同一个域名下.
如果是同一个域名下的.
var win = document.getElementById('frmid').contentWindow;
var frmobj = win.document.getElementById('控件');
与iframejs相关的资料
- java监听器延时
- net获取json数据
- 阿里巴巴全屏轮播代码
- 禁止使用qq浏览器代码
- js获取端口号
- java字符串怎么初始化
- linuxjava程序
- 尼泊尔国家电话代码
- firebug格式化代码
- 点击添加购物车js
- note3应用程序怎么移动
- 大学生程序设计大赛时间
- 特产网程序
- 网页框架拆分代码
- java设计模式应用
- extjstreepanel图标
- 用友存货代码空格
- java生成电影座位
- js函数带有参数
- java常量类
- promisejs
- 软件java通用版下载
- java插入字符串
- jsp如何使用断点调试
- java中字符和字符串
- 九型下载测试源代码
- javafinal要不要大写
- 什么叫银行交换代码
- cf代码283会怎样
- java导入xls数字带0
- 程序员男友爱你的表现
- java写一个shape形状类
- java程序员全攻略下载
- javapoi配置
- 安卓代码读取界面信息
- 哈尔滨市行政区划代码
- 程序员比特币
- 淘宝代码隐藏导航不见了
- java稳定排序
- 学ui设计要学java吗
- js怎么单击改变标签里的文字
- 代码002