jquery 如何实现iframe页面的切换？？

Posted 2023-04-27

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 如何实现iframe页面的切换？？相关的知识，希望对你有一定的参考价值。

我得main.html有两个iframe,left和center其中left.html里是菜单，点击菜单选项切换center 里的页面，我得菜单是通过tree实现的，tree的点击事件可以的到，但是点击事件里的内容怎么写？？
$(function()
$('#menuTree').tree(
url:'menuData.json',
onClick:function(node)
$(this).tree('toggle', node.target); //这儿怎么写？？可以让center里切换到另一个页面？
,
);
);
满意再加分！谢谢了！

参考技术A Jquery弹出层窗口，并且背景变暗
先到下载Jquery的Lee dialog插件，
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" src="dialog.js"></script>
<script language="javascript" src="Jquery.js"></script>
<style>
#floatBoxBg
.floatBox
.floatBox .title
.floatBox .title h4
.floatBox .title span
.floatBox .content
</style>
</head>

<body>
<script>
function aa()

dialog("我的标题","iframe:login.php","500px","auto","text"); // login.php 为要弹出的窗口

</script>
<a href="#" onclick="aa()" >Click Here</a>
</body>
</html>

关于这个dialog插件的其它用法：
get加载一个.html文件（也可以是.php/.asp?id=4之类的）
dialog("我的标题","test.html","200px","auto","text");

弹出纯文本内容
dialog("我的标题","text:我的内容","200px","auto","text"); 试试
弹出某id里面的html
页面有<div id="testID" style="display:none;"><h2>Lee dialog</h2></div>
dialog("我的标题","id:testID","300px","auto","id"); 试试
Lee dialog
加载一个页面以框架示
把blueidea加载进来，定义css:body .iframe .content复盖一下，因为.content默认padding:20px;
dialog("blueidea","iframe:","500px","500px","iframe");

参考技术B 你直接设置center的frame页面的src属性就可以了啊本回答被提问者采纳

如何使用 jquery 访问 iFrame 父页面？

【中文标题】如何使用 jquery 访问 iFrame 父页面？【英文标题】：how to access iFrame parent page using jquery? 【发布时间】：2010-10-18 03:06:09 【问题描述】：

我有一个 iframe，为了访问父元素，我实现了以下代码：

window.parent.document.getElementById('parentPrice').innerHTML

如何使用 jquery 获得相同的结果？更新：或者

【问题讨论】：

另见***.com/questions/12114243/… 【参考方案1】：

在父窗口中放置：

<script>
function ifDoneChildFrame(val)

   $('#parentPrice').html(val);

</script>

并在 iframe src 文件中放置：

<script>window.parent.ifDoneChildFrame('Your value here');</script>

【讨论】：

【参考方案2】：

有多种方法可以做到这些。

I) 直接获取主父节点。

例如。然后我想将我的子页面替换为 iframe

var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);

这里 top.location 直接获取父级。

II）一一获取父母，

var element = $('.iframe:visible', window.parent.document);

如果您有多个 iframe，请在此处指定活动的或可见的。

你也可以这样做以获得更多的父母，

var masterParent = element.parent().parent().parent()

III) 通过标识符获取父级。

var myWindow = window.top.$("#Identifier")

【讨论】：

【参考方案3】：

您可以使用window.parent 从 iframe 中访问父窗口的元素，如下所示：

// using jquery    
window.parent.$("#element_id");

等同于：

// pure javascript
window.parent.document.getElementById("element_id");

如果你有多个嵌套的 iframe，并且你想访问最顶层的 iframe，那么你可以像这样使用window.top：

// using jquery
window.top.$("#element_id");

等同于：

// pure javascript
window.top.document.getElementById("element_id");

【讨论】：

【参考方案4】：

如果您需要在父文档中查找 jQuery 实例（例如，调用插件提供的实用函数），请使用以下语法之一：

window.parent.$ window.parent.jQuery

例子：

window.parent.$.modal.close();

jQuery 被附加到 window 对象上，这就是 window.parent 的含义。

【讨论】：

我将 iframe 用作用户控件。这让我保持整洁。【参考方案5】：

在这里玩游戏可能有点晚了，但我刚刚发现了这个很棒的 jQuery 插件https://github.com/mkdynamic/jquery-popupwindow。它基本上使用了一个 onUnload 回调事件，因此它基本上会监听子窗口的关闭，并在那时执行任何必要的操作。所以真的不需要在子窗口中写任何JS传回给父窗口。

【讨论】：

【参考方案6】：

它对我来说很有效。在我的情况下，我必须将值从 POPUP JS 填充到 PARENT WINDOW 表单。

所以我用了$('#ee_id',window.opener.document).val(eeID);

太棒了！！！

【讨论】：

【参考方案7】：

是的，它也对我有用。

注意：我们需要使用 window.parent.document

    $("button", window.parent.document).click(function()
    
        alert("Functionality defined by def");
    );

【讨论】：

【参考方案8】：

如何使用 jquery 访问 iFrame 父页面

window.parent.document.

jQuery 是一个基于 JavaScript 的库，而不是它的完全替代品。您不必将每一个 JavaScript 表达式都替换为涉及 $ 的内容。

【讨论】：

+1。 jQuery 很棒，但很多简单问题的答案似乎都是“使用 jQuery”。如果您仍然要加载库，那很好，但不要加载它一项任务。此外，人们似乎担心 JS 的性能，然后在 JS 之上使用 API 来轻松（并且可能更快）地完成没有 API 的事情。 @Grant 虽然我确实梦想 jQuery 成为浏览器中的原生代码。 @Blowski：那是我的噩梦！ jQuery 包含许多极其复杂和脆弱的“按我的意思做”代码，这些代码完全不适合放入官方 API。 @bobince：显然，您应该始终将所有 Javascript 替换为 jQuery。就像培根；不存在越少越好的情况。 ;) OP 已经有 window.parent.document，所以这没有回答任何问题。并且想象选择器逻辑比元素的 ID 复杂得多，在这种情况下 jQuery 非常方便。我觉得问题是“我怎么用法语说'你好'？”这个答案是“说德语”。【参考方案9】：

要在 iFrame 的父级中查找，请使用：

$('#parentPrice', window.parent.document).html();

$() 包装器的第二个参数是搜索的上下文。这默认为文档。

【讨论】：

酷 - 在他感谢你之前，你已经承认了感谢。 *** 可能存在时区问题？你也可以这样做：$(window.parent.document).find("#parentPrice").html(); @belugabob 这是巫师的错。对于那些使用window.open 启动windoid 的人，不要忘记那个旧的JS 标准window.opener.document。 $("#someDiv", window.opener.document) 有效。这仅在 iframe 的源代码加载了 jQuery 时才有效。以我的经验，iframe 源没有 jQuery，但经常需要调用父级的 jQuery 函数之一。为此，请使用： window.document.$("#parentPrice").html() 这是 Álvaro G. Vicario 发布的答案。

以上是关于jquery 如何实现iframe页面的切换？？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 jquery 访问 iFrame 父页面？

怎么用jquery实现iframe里的页面地址跳转到另一个页面地址，想webqq里的浏览窗口一样？

jquery 如何实现跨域载入其他网站的页面内容

jquery如何在html页面取得iframe的元素

jquery如何获取页面中引入iframe网页的内容

Selenium 如何切换到 iframe 内联页面