jquery 查找iframe父级页面元素的实现代码

父页面代码


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div style="height:300px; background-color:#CC9900"></div>
<div>
<iframe src="test_iframe.html"></iframe>
</div>
</body>
</html>

iframe页面代码


代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$("body",parent.document).append('hahaha');
</script>
</head>
<body>
iframe test--@mybest
</body>
</html>

　在jQuery的文档上有这样的记录：
jQuery(html, [ownerDocument])
参数
html String
用于动态创建DOM元素的HTML标记字符串

ownerDocument (可选) Document
创建DOM元素所在的文档

还是要多看，细看文档啊，真是所谓：书读百遍，其义自见啊！

------补记--------------------------

在测试时，发现chrome如何也不能实现上述要求，后来看到网上有人指出iframe不能跨域，这是问题之一，另一个原因是要放到一个站点中去测试

如：http://localhost:8087/test.html

这样chrome也就表现正常了

赞 (0)

相关推荐

  • JQUERY 获取IFrame中对象及获取其父窗口中对象示例

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 在父窗口中获取iframe中的元素 格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 实例:$("#ifm").contents().find("#btnOk").click(); 在iframe中获取父窗口的元素 格式:$(

  • 使用jquery/js获取iframe父子级、同级获取元素的方法

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementById("

  • jquery、js调用iframe父窗口与子窗口元素的方法整理

    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) 3.js 在iframe子页面获取父页面元素代码如下: indow.parent.document.getElementByIdx_x("元素id");

  • JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

    JQUERY IFRAME下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS与可以实现. 第一.在iframe中查找父页面元素的方法:$('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法:$(this).contents().find("#suggestBox") 第三.在iframe中调用父页面中定义的方法和变量:parent.methodparent.value iframe里用jquery获取父页面bod

  • jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码

    iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易,模拟下F11的功能键什么的,于是网上一搜还真有一大堆关于全屏化的案例,遂借来用之. 然后高高兴兴的拿一个没有iframe引入的页面做了个测试页面查看全屏化功能效果,代码如下(fullScreenPage.html): <!DOCTYPE html> <html xmlns="htt

  • js与jQuery 获取父窗、子窗的iframe

    在web开发中,经常会用到iframe,难免会碰到需要在父窗口中使用iframe中的元素.或者在iframe框架中使用父窗口的元素 js 在父窗口中获取iframe中的元素 1. 格式:window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click(); 实例:window.frames["ifm"].document.getElementByIdx_x

  • jQuery实现iframe父窗体和子窗体的相互调用

    本文实例讲述了jQuery实现iframe父窗体和子窗体的相互调用方法.分享给大家供大家参考,具体如下: 父窗体 <html> <head> <title>usually function</title> </head> <body> <iframe src="http://www.baidu.com" ></iframe> <iframe src="myifame.html

  • iframe里面的元素触发父窗口元素事件的jquery代码

    例如父窗口定义了一个事件. top: $(dom1).bind('topEvent', function(){}); 那么iframe里面的元素怎样触发父窗口dom1的事件呢?这样吗? $(dom1, parent.document).trigger('topEvent'); 看似正确,实则误导人. 因为父窗口的jquery对象与iframe里面的jquery对象实际为两个对象(function),iframe里面的jquery并不会触发另一个jquery对象定义的事件.除非你在iframe这样

  • JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1)在iframe中查找父页面元素的方法:$('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量:parent.methodparent.value 3)实例 1.父页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Ifram

  • 利用JQuery操作iframe父页面、子页面的元素和方法汇总

    前言 iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,本文主要给大家分享了关于简单使用JQUERY来操作IFRAME的一些记录,这个使用纯JS也可以实现.下面话不多说了,来一起看看详细的介绍吧. 第一.在iframe中查找父页面元素的方法: $('#id', window.parent.document) 第二.在父页面中获取iframe中的元素方法: $(this).contents().find("#suggestBox") 第三.在iframe

随机推荐