H5监听Iframe内部点击实现正常跳转_框架

近期开发中，在布局中使用了IFrame做主页切换，大概布局就是底部一个选择卡，往上就是多个IFrame，点击选择卡切换页面。

我其中一个页面是消息列表，点击后跳转详情页，但是跳转后由于是IFrame内部处理跳转，底部选择卡不会消息。

需要在Iframe的内部点击事件监听处理的时候，不让IFrame的内部跳转，而是整个主页面跳转。

而主页面是Ifarme的父页面，可以通过windowparent直接达到效果。

浏览网页时，可以用 View->Source 打开网页源文件，观看。

iframe 标签中有个 src=URL。你可以复制这个URL 网址，用浏览器打开这个网址，然后用

File->Save as 就可存放下来。

//jquery在父窗口中获取iframe中的元素

//1、获取页面firame1的html内容

$("#iframe1")contents()find("#form1")html()

//获取iframe内的网页标题

$("#iframe的ID")contents()attr("title");//jquery 方法1

//类似的方法

$(selector, windowtopdocument);

$(selector, windowopenerdocument);

$(selector, windowtopframes[0]document);

在父窗口中获取iframe中的元素

1、

格式：windowframes["iframe的name值"]documentgetElementByIdx_x("iframe中控件的ID")click();

实例：windowframes["ifm"]documentgetElementByIdx_x("btnOk")click();

2、

格式：

var obj=documentgetElementByIdx_x("iframe的name")contentWindow;

var ifmObj=objdocumentgetElementByIdx_x("iframe中控件的ID");

ifmObjclick();

实例：

var obj=documentgetElementByIdx_x("ifm")contentWindow;

var ifmObj=objdocumentgetElementByIdx_x("btnOk");

ifmObjclick();

在iframe中获取父窗口的元素

格式：windowparentdocumentgetElementByIdx_x("父窗口的元素ID")click();

实例：windowparentdocumentgetElementByIdx_x("btnOk")click();

jquery

在父窗口中获取iframe中的元素

1、

格式：$("#iframe的ID")contents()find("#iframe中的控件ID")click();//jquery 方法1

实例：$("#ifm")contents()find("#btnOk")click();//jquery 方法1

2、

格式：$("#iframe中的控件ID",documentframes("frame的name")document)click();//jquery 方法2

实例：$("#btnOk",documentframes("ifm")document)click();//jquery 方法2

在iframe中获取父窗口的元素

格式：$('#父窗口中的元素ID', parentdocument)click();

实例：$('#btnOk', parentdocument)click();

父窗获取子窗口的IFrame中的JS方法

一、父窗口调用iframe子窗口方法

1、HTML语法：<iframe name="myFrame" src="childhtml"></iframe>

2、父窗口调用子窗口：myFramewindowfunctionName();

3、子窗品调用父窗口：parentfunctionName();

简单地说,也就是在子窗口中调用的变量或函数前加个parent就行

4、父窗口页面源码：

复制代码代码如下:

<html>

<head>

function say() {

alert("parenthtml------>I'm at parenthtml");

}

function callChild()

{

//documentframes("myFrame")f1();

myFramewindowsay();

}

</script>

</head>

<body>

</body>

</html>

5、子窗口页面：

复制代码代码如下:

<html>

<head>

function say()

{

alert("childhtml--->I'm at childhtml");

}

function callParent() {

parentsay();

}

</script>

</head>

<body>

</body>

</html>

二、iframe 父窗口和子窗口相互的调用方法

1、IE中使用方法：

父窗口调用子窗口：iframe_IDiframe_document_objectobject_attribute = attribute_value

例子：onClick="iframe_textmyH1innerText='>

div所在的文档

<html>

<head>

<title>无标题文档</title>

</head>

<body>

function DivClick()

{

alert('你单击了div');

}

</script>

<div style='height: 100; width:100' onclick='DivClick()'>单击div</div>

</body>

</html>

下面是iframehtml

<html>

<head>

<title>无标题文档</title>

</head>

<body>

function iFrameClick()

{

windowparentDivClick();

}

</script>

<a href="#" onclick='iFrameClick()'>执行主窗口的divClick</a>

</body>

</html>

以上就是关于H5监听Iframe内部点击实现正常跳转全部的内容，包括:H5监听Iframe内部点击实现正常跳转、如何获取iframe标签中的内容、jquery如何获取页面中引入iframe网页的内容等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9619923.html

H5监听Iframe内部点击实现正常跳转

发表评论

评论列表（0条）