标签分类 技术文章:
当前位置:首页 > jQuery技术文章 > 同域jQuery(跨)iframe操作DOM

同域jQuery(跨)iframe操作DOM的实例代码讲解

  • 发布时间:
  • 作者:码农之家原创
  • 点击:117

这篇文章主要知识点是关于jQuery、iframe、跨域、Jquery取得iframe下内容的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战
jQuery实战高清第三版
  • 类型:jQuery大小:99.0 MB格式:PDF出版:华中科技大学出版社作者:Bear Bibeault
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

同域jQuery(跨)iframe操作DOM

frame目前还是比较流行的,许多地方都通过它来实现特殊的情况。比如说传统的上传、select在ie6下、代理、跨域等等。今天呢,简要的记述一下跨iframe的相关操作,主要是用jQuery操作DOM结构方面。

 

<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">

 

$('#read-aa').click(function()
{
    var v=$('#aa').contents().find('body').html();
    alert(v);
});
$('#write-aa').click(function()
{

    $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');
});

主要方法是 contents(),读取iframe。

 

2、iframe跨父框架操作iframe

 

<!DOCTYPE html>
<meta charset="utf-8">
<title>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</title>
<script src="public/jQuery.js"></script>
<script>
$(function()
{
    $('#read-parent-aa').click(function()
    {
        var v=$('body',parent.document).find('#aa').contents().find('body').html();
        alert(v);
    });
    $('#write-parent-aa').click(function()
    {
        $('body',parent.document).find('#aa').contents().find('div').append('<hr>这是bb.php操作aa.php写入的内容');
    });
});
</script>
<div>
这是iframe #bb里的内容
</div>
<input type="button" id="read-parent-aa" value="跨父读取iframe #aa">
<input type="button" id="write-parent-aa" value="跨父写入iframe #aa">

HTML:代码
 

<!DOCTYPE html>
<meta charset="utf-8">
<title>jQuery操作iframe</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<iframe src="a.php" id="aa"></iframe>
<iframe src="b.php" id="bb"></iframe>
<input type="button" id="read-aa" value="读取iframe #aa">
<input type="button" id="write-aa" value="写入iframe #aa">
<script>
$(function()
{
 $('#read-aa').click(function()
 {
  var v=$('#aa').contents().find('body').html();
  alert(v);
 });
 $('#write-aa').click(function()
 {

  $('#aa').contents().find('div').append('<hr>这是index.php操作aa.php写入的内容');
 });
});
</script>

 

Jquery取得iframe下内容的方法


     document.all('Iframe1').contentWindow.document.getElementById("deptName").width;

     $(window.parent.Iframe1.document.body).find('#deptName').width();

跨域调用IFRAME时会遇到拒绝访问.在网上找了未测试解决办法
    经查资料发现 ,默认情况下,浏览器是禁止 脚本跨域访问的,除非这些域之间有必须的访问信任关系。

    找到问题就好办了,可以降低浏览器的安全级别,但这样对用户无疑是不利的。

    所以我们在页面上需要加一段js
  
    try
    {
    document.domain = "xxx.net";
    }
    catch(e)
    {
    }
  
    手动把子页和父页的域名设成同一个,问题就可以解决了。

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jQuery实现点击旋转再点击、 jQuery联动日历的实例代码、 jquery实现去除重复字符串、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jquery点击元素后滚动条滚动至该元素位置的功能实现

下一篇:jquery实现鼠标拖动效果的代码

展开 +

收起 -

学习笔记
网友NO.922848

jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题

项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlezqc/title script type="text/javascript" src="js/jquery-3.2.1.min.js"/script link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" /headbodyscript src="layui/layui.js"/scriptscript//一般直接写在一个js文件中layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form;//弹出即全屏 var index = layer.open({ type: 2, content: 'http://layim.layui.com', area: ['320px', '195px'], maxmin: true }); layer.full(index);});/script /body/html 就是因为头部引入了 jquery-3.2.1.min.js 导致iframe窗口无法全屏,效果如下 解决办法: 方法一.使用layui内置的jquery 方法二.使用jquery1.X版本,我这里事更换的jquery-1.12.4,解决后代码如下: !DOCTYPE htmlhtmlhead meta charset="utf-8" meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" titlezqc/title script type="text/javascript" src="js/jquery-1.12.4.min"/script link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" rel="external nofollow" /headbodyscript src="layui/layui.js"/scriptscript//一般直接写在一个js文件中layui.use(['layer', 'form'], ……

网友NO.841769

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

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 1.父页面 %@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" % !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 runat="server" title/title script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"/script script language="javascript" type="text/javascript" var hello = 'hello'; function getHelloWorld() { alert('hello world'); } /script /head body form id="form1" runat="server" div div id="default" default.aspx/div iframe id="iframeid" src="IFrame.aspx" /iframe /div /form /body /html 2.子页面 %@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.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 runat="server" title/title script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"/script script language="javascript" type="text/javascript" $(function() { //在iframe中查找父页面元素 alert($('#default', window.parent.document).html()); //在iframe中调用父页面中定义的方法 parent.getHelloWorld(); //在iframe中调……

网友NO.973989

jQuery取得iframe中元素的常用方法详解

本文实例分析了jQuery取得iframe中元素的常用方法。分享给大家供大家参考,具体如下: jquery取得iframe中元素的几种方法: 在iframe子页面获取父页面元素 代码如下: 复制代码 代码如下: $('#objId', parent.document); 搞定... 在父页面 获取iframe子页面的元素: $("#objid",document.frames('iframename').document)$(document.getElementById('iframeId').contentWindow.document.body).html() 显示iframe中body元素的内容。 复制代码 代码如下: $("#testId", document.frames("iframename").document).html(); 根据iframename取得其中ID为"testId"元素 复制代码 代码如下: $(window.frames["iframeName"].document).find("#testId").html() 用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /title页面首页/title/headbodyiframe src="iframe.html" id="koyoz" height="0" width="0"/iframe/body/html iframe.html 内容: !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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /titleiframe.html/tit……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明