如何使用jQuery访问iframe的内容？
要使用jQuery访问iframe的内容，您需要首先确保iframe的源（src）与主页面的源相同，这是因为浏览器的同源策略（Same-origin policy）限制。如果两者的源相同，您可以使用以下方法访问iframe的内容：
// 获取iframe的jQuery对象
var iframe = $("#myIframe");
// 获取iframe的DOM对象
var iframeDom = iframe.get(0);
// 获取iframe内的文档对象
var iframeDoc = iframeDom.contentDocument || iframeDom.contentWindow.document;
// 获取iframe内的body元素
var iframeBody = $(iframeDoc.body);
// 访问iframe内的元素
var iframeElement = iframeBody.find("#elementId");在这个示例中，您需要将#myIframe替换为您的iframe元素的ID选择器。同样，您可以根据需要替换#elementId以访问iframe内的特定元素。
如果您需要跨域访问iframe的内容，您需要使用window.postMessage()方法进行通信。这是一个安全的跨域通信方法，允许来自不同源的窗口彼此发送消息。您需要在主页面和iframe页面中分别定义事件监听器以处理接收到的消息。
概念：跨域通信
优势：实现跨域通信，提高网站安全性和稳定性
应用场景：需要在不同源的网站或应用程序之间共享数据或实现通信的场景
推荐的腾讯云相关产品：腾讯云COS（对象存储）、腾讯云CDN（内容分发网络）、腾讯云CLB（负载均衡）
产品介绍链接地址：
相关·内容
当在页面上以通常的方式作为脚本运行时，这段代码会在jQuery被动态注入页面后打印它的版本。但是在我的chrome扩展中，当我在动态注入jQuery后尝试打印jQuery版本时，输出是undefined。
// create iframe
var frame = document.createElement("iframe");
// when frame loads
frame.addEventListener("load", function() {
// create script to dynamically inject into DOM
v
浏览 3提问于2016-02-27得票数 1
回答已采纳
我有一个iFrame，并且已经知道如何使用jQuery克隆它：
<HTML>
<HEAD>
<SCRIPT type="text/javascript" src="jquery.js"></SCRIPT>
<SCRIPT>
function clone_test() {
$('#FRAME1').clone().appendTo('#divtag');
}
</SCRIPT>
</HEAD>
<DIV
浏览 0提问于2012-01-05得票数 0
回答已采纳
2回答
现在我正在做一个简单的脚本。
让我先给你我所拥有的所有代码：
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
function SuperWebF1() {
$("#outerdiv").css({"border":"2px solid #e39f9f"});
alert('SportsDirect.
浏览 1提问于2014-10-28得票数 0
5回答
按属性值查找元素
、、
我的页面上有一些img标记在iFrame(id=iframe1)中。它们中的一些将src属性设置为myimg.jpg、‘myimgSmall.jpg’、myimg_large.jpg等。
我试图在#iframe1中找到src中的所有东西，比如myimg，所以我写了
images = $('#iframe1').contents().find('[src*="myimg"]')
但我收到的错误如下
未识别错误:语法错误，未识别表达式: src*="myimg")
在Function.Sizzle.error (jQuery1.8.
浏览 10提问于2017-01-30得票数 1
1回答
我想知道如何让我的父页面访问iframe，并将innerhtml (使用jQuery .html())设置为我将提供的变量。
这是我到目前为止所知道的：
var iframe = document.getElementById('framer');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var content_destination = innerDoc.getElementById('placecontenthere');
$(content_dest
浏览 0提问于2013-05-23得票数 0
2回答
我试图在一个iframe内的表单上瞄准一个按钮，但它不工作，所以我的问题是我如何瞄准一个在iframe内的按钮，任何帮助都非常感谢。
这就是我所做的，我在我的网站上测试了它，以确保jquery可以工作，它确实工作了，但我只是无法在iframe中获得按钮。
$(document).ready(function(){
/*iframe name is #innerdiv*/
$("#innerdiv #btnGoBorrow").click(function(){
$("#outerdiv").slideToggle(
浏览 2提问于2011-12-09得票数 0
1回答
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
$(document).ready( function () {
$('#iView').load( function () {
$('this').contents().find("html").css("background-image","none");
});
});
<iframe
浏览 0提问于2013-09-16得票数 0
2回答
我如何使用jQuery来做这件事呢？
主要的结构是：
<form id="myForm">
<iframe>
<!-- Normal HTML headers omitted -->
<input type=radio name="myRadio" value=1>First
<input type=radio name="myRadio" value=2>Second
<input type=radio name="myRadio
浏览 0提问于2008-10-13得票数 3
回答已采纳
1回答
我试图创建一个网站，从另一个网站检索数据，然后粘贴到我的网站上的一个表格。我正试图通过iframe和jQuery来实现这一点。目前，我不关心粘贴数据。我只是想让jQuery检索包含我需要的数据的div。
这是我的iframe代码：
<iframe id="data1" src="http://example.example" hidden="true"></iframe>
id frStatus2的div位于html文档的正文中。
这是我的javascript/jQuery代码：
$(document).ready(fun
浏览 3提问于2014-01-01得票数 1
回答已采纳
1回答
我正在开发一个html5游戏应用程序，我在我的页面上有两个部分，菜单和游戏，这是在iframe。当我打开应用程序时，菜单就会出现，如果我点击播放，菜单就会隐藏(使用jquery)，它会在游戏部分写下iframe元素：(<iframe src="Game.html class="GameFrame" ></iframe>)，也是在jquery中。现在，问题是我找不到退出iframe并再次显示菜单部分的方法。有谁有主意吗？谢谢你，波阿斯
浏览 0提问于2013-01-08得票数 1
回答已采纳
祝你们今天万事如意！
我想问的是，当我们最终到达Iframe底部时，如何检测滚动事件。我一直在尝试一些jQuery代码，我在这些堆栈溢出的文章和中看到了这些代码，但是什么也做不了。所以，我们来说说吧，这是我的html：
<div class="wrapper-1">
<div class="wrapper-2">
<iframe id="iframec" class= "content-iframe" data-src="https://en.wikipedia.org/wiki/
浏览 6提问于2022-06-21得票数 0
回答已采纳
1回答
我试着用jQuery做一个简单的练习，它有3个按钮和1个iframe。按钮向上，向下，停止。我希望当我点击向上时，iframe的滚动到顶部，以防移动&当单击Down时，它应该位于底部，当单击stop时，滚动应该停止。我试着把卷轴画到最上面，但我做不到。请检查我的代码，并给我一个有用的链接。谢谢。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
浏览 0提问于2016-11-20得票数 2
回答已采纳
2回答
我有一份这样的名单：
<iframe src="foo">
<button class="dissmiss">Close</button>
<script>
// Do job here...
</script>
</iframe>
<iframe src="bar">
<button class="dissmiss">Close</button>
<script
浏览 4提问于2013-11-01得票数 0
回答已采纳
我有一个id为"test“的div。在它里面是一个没有id的iframe。我需要访问此iframe的正文内容。如何使用JS/Jquery来实现？
浏览 3提问于2012-11-02得票数 1
回答已采纳
3回答
嵌入式加载后的回调
、、、、
我正在以标准的方式加载一个嵌入的Google日历：
<iframe id="calendar" src="https://www.google.com/calendar/embed...></iframe>
我想使用jQuery在load事件之后应用一些样式更改，例如：
$('iframe#calendar').contents().find('.blahblah').css("display", "none");
我大概需要使用interval循环：
var interval_ca
浏览 2提问于2014-06-21得票数 0
回答已采纳
我正在尝试使用jquery将iframe中的所有链接设置为"_parent“，但我不确定如何做到这一点，有人能帮助我吗？
<script src="jquery-1.5.2.min.js">
$('a').target("_parent");
</script>
<iframe src="http://google.com" frameborder="0"></iframe>
我这样做是因为我想自定义我的Firefox4主页，在“登录”链接附近显示带有恢
浏览 1提问于2011-04-10得票数 4
我使用的是来自的脚本，其中有一个jquery/ajax/php/mysql聊天系统1。
我的问题是，我想把它放在域A中，但带有一个iframe，它将从域B获得它，并具有相同的功能。我想要iframe的原因是因为我希望所有数据都保存到域B中，而不是保存在A中。(跨域)
此脚本使用会话来正确运行。
您可以在此处查看示例
如何在域A上的iframe中调用它，并具有相同的功能？
浏览 5提问于2015-05-16得票数 0
1回答
我们正在将保险报价表格(引自-A-服务)作为iFrame嵌入到我们的网页中.它真的不适用于我们的设计，所以我们尝试使用jQuery更新CSS。
<iframe src="https://www.agentinsure.com/compare/auto-insurance-home-insurance/insura/quote.aspx" width="100%" height="2000" frameborder="0"></iframe>
jQuery(document).ready(function(
浏览 0提问于2018-12-08得票数 0
回答已采纳
2回答
我有一个简单的问题。我有一个包含4个不同iFrames的JSP。在我的JSP中，我包含了JQuery UI库：
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.co
浏览 0提问于2013-05-13得票数 3
回答已采纳
我试图使用.contents()方法将div元素隐藏在iframe中，然后从给定的iframe中获取所需的元素并隐藏它，但它不起作用。
$(document).ready(function(){
$('#myframe').contents().find('#logo-events').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<iframe id=&
浏览 3提问于2014-12-09得票数 0
如何使用JQuery、javascript或CSS在iframe中隐藏元素我尝试过这样做，但JQuery无法识别元素的id，CSS代码也无法工作，有没有其他方法可以做到这一点
浏览 1提问于2012-03-03得票数 0
回答已采纳
我正在使用PhoneGap开发应用程序，我单独使用iframe，如何克服它没有加载iframe字段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, user-sc
浏览 0提问于2016-06-22得票数 5
2回答
我有一个jsp，它包含一个iframe和一个按钮。iframe包含一个jqgrid。当按钮被按下时，我需要警告该iframe内的jqgrid的记录计数。
我试过了
var grid = jQuery("#myFrame").contents().find("#myGrid");
var count = grid.jqGrid('getGridParam', 'reccount');
alert(count); //alerts undefined
如何从iframe访问jqgrid？
更新：
HTML片段
<body
浏览 5提问于2012-09-10得票数 2
我试图将代码注入到iframe中，但我没有任何运气，我也不确定为什么。我将我的js代码存储到一个变量中，这个变量在这一点上工作正常，存储在一个名为pixel_code的变量中。然后，我想将该代码注入到iframe中。假设iframe的id是"iframe_“，我如何将代码(变量是pixel_code)注入到iframe中并执行它？我认为jquery是最简单的方式，但我也对常规JS持开放态度。
我有许多不成功的尝试，其中之一是：
function captureValue(){
pixel_code = document.getElementById("baseText"
浏览 0提问于2013-01-25得票数 0
回答已采纳
1回答
我真的不明白为什么这段代码不能工作。
我从一个MySQL查询创建了一个链接列表，并对它们进行分类以打开一个jQuery对话框onClick。下面是我如何生成链接和所有脚本内容：
$(function(){
$( "#select" ).dialog({
autoOpen: false,
width: 280,
modal: true,
resizable: false,
},
buttons: [{
text: "Close",
浏览 0提问于2013-12-06得票数 0
2回答
怎样才能知道如果已经准备好了呢？
、、、、
我在网页里有一个iframe，当它准备好的时候，我想做一些事情。我试了两种方法：
在父页面中，我使用以下内容
jQuery(‘#iframe’).load(函数(){//这里的代码})；
这段代码将在iframe加载完成(如我所希望的那样)时执行，但由于我的iframe被指向另一个域，所以此时我无法访问它的内容(跨域问题)。
在iframe里面，我用这个：
jQuery(‘body’).ready(函数(){ })；
这段代码是在iframe开始加载时执行的，这比我想要的要早得多，因此代码不能正常工作。
那么当iframe完成加载并准备好进行DOM操作时，我是如何执行代
浏览 2提问于2012-02-28得票数 1
1回答
我的aspx页面上有一个jquery，它通过jquery模式中的iframe加载一个独立的aspx页面。我将文本框的值传递给jquery-模式。现在，我有一个模式弹出的网格视图，每次我选择一个行，我想将这些值返回给基(父页面，并在模式中填充一些带有网格视图行的文本框)。
我无法将值传回基页。
我的jquery如下：
$("#addForm").dialog({
autoOpen: false,
modal: true,
width: 500,
scroll: true,
overlay: {
浏览 2提问于2011-02-21得票数 0
1回答
我有一个简单的html代码，上面有一个iframe，我想在父元素的iframe之外访问一个全局变量。
有人知道为什么chrome不想让我开心吗？:)
iframe的代码在ff中运行良好，即...但不是chrome。
Html代码：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script> var one = "two"; </script&
浏览 0提问于2011-12-29得票数 4
回答已采纳
2回答
对于我的一个Chrome扩展项目，我通过动态填充它的src属性，在当前网页的<iframe>标记中获取另一个网页的HTML内容。现在，我想从<iframe>标记中抓取几个值。但是jQuery总是将这个<iframe>标记显示为空。我使用的原因是在抓取页面中有一些JavaScript文件，我希望在开始抓取之前执行这些文件。我还尝试设置等待定时器，但是jQuery总是显示<iframe>标记为空(尽管src属性已设置)。
经过调查，我发现<iframe>的内部有一个奇怪的#document值，然后是普通的#document标记。我想知道这
浏览 1提问于2018-07-02得票数 0
1回答
我将从这份文件中得到以下信息：
<form id="myform" action="http://example.com/" target="myiframe">
//some fields
</form>
<iframe name="myiframe" src=""></iframe>
然后，在某一点上，我用javascript提交了这个表单：
<script type="text/javascript">
docum
浏览 4提问于2014-07-23得票数 3
还有许多具有类似标题的其他流。我尝试了所有的流程，但都不起作用。
Register.php有表单和相关的js文件。一旦我注册了，感谢页面也会以相同的高度出现。
HTML
<a class="reg-popup fancybox.iframe" data-fancybox-type="iframe" href="register.php"> Register </a>
Jquery
jQuery(document).ready(function() {
jQuery(".reg-popup&#
浏览 3提问于2015-05-18得票数 0
我尝试使用$.load从nytimes.com加载整个页面，因为我很好奇是否有一种替代方法可以不用iframe嵌入整个页面
我的观点是理解如何构建像twitter这样的东西，或者像Pulse for ipad这样的应用程序等等。
有没有可能用jQuery或php加载页面来避免iframe？
谢谢
浏览 1提问于2011-03-20得票数 0
回答已采纳
我在我的jsp上使用wysihat-engine。它工作得很好，但当我试图添加一个预览功能，这个功能应该是从动态创建的iFrame中读取，并将它的值放入隐藏的预览div中时，它无法读取iframe包含的html。有解决这个问题的办法吗？谢谢!在本例中，我希望使用jquery在主体内返回值
下面的div不是在我的jsp中编写的，但它是通过WYSihat.js文件附加到iFrame的：
<iframe id="iframeId" class="abc">
<html>
<head></head>
浏览 2提问于2011-01-10得票数 2
回答已采纳
2回答
我认为PHP是没用的，因为iframe是在php执行后插入的，还是我错了？
因此，我所知道的唯一解决方案是使用Javascript/jQuery。
例如，如果JS与iframe在同一个页面上，这将会起作用：
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<scr
浏览 2提问于2013-05-21得票数 4
回答已采纳
1回答
伙计们，我想用jQuery点击iframe里面的一个按钮。
下面是我创建的函数：
<script type="text/javascript">
function ClickTheButton()
{
$('#InnerIframe').contents().find('#SuperWebF1').trigger( "click" );
}
</script>
下面是按钮被iframe调用时的HTML代码：
<button type="button
浏览 0提问于2014-12-07得票数 0
这是我拥有的html：
<iframe id="edit-resp398__ifr" frameborder="0" src="javascript:""">
<!DOCTYPE >
<html>
<head xmlns="http://www.w3.org/1999/xhtml">
<body id="tinymce" class="mceContentBody " spellcheck="false" dir=
浏览 4提问于2014-04-28得票数 0
回答已采纳
我正在使用jquery漂亮的照片2.5.3，我想知道当iframe内的图像链接被选中时，我如何才能让灯框显示在iframe的父窗口中？
下面是我的代码：
iframe中的页面：
<html>
<head>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="
浏览 2提问于2009-09-27得票数 1
回答已采纳
我试图阻止浏览器的上下文菜单显示在每个元素'iframe‘上的事件’右击‘，但是它不起作用--上下文菜单仍在工作。
这是我的代码：
$(document).ready(function () {
$("iframe").each(function(){
$(this).on("contextmenu",function(e){
e.preventDefault(); //return false;
});
});
});
<script src
浏览 7提问于2017-07-17得票数 0
回答已采纳
我有一个iframe，为了访问父元素，我实现了以下代码：
window.parent.document.getElementById('parentPrice').innerHTML
如何使用jquery获得相同的结果？
更新：或者如何使用jquery访问iFrame父页面？
浏览 12提问于2009-04-07得票数 278
回答已采纳
1回答
我想用jQuery隐藏youtube播放器的右菜单
$('iframe').contents().find
这是，但它不起作用
如何用<ul class="html5-context-menu yt-uix-button-menu"改变style z-index:10
浏览 2提问于2015-05-23得票数 0
回答已采纳
如何在iframe中获取鼠标经过的元素？以下代码适用于HTML页面，但不适用于iframe>中的html
<head>
<script type="text/javacsript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
$(document).ready(function ({
$('body').mousemove(function
浏览 2提问于2013-05-27得票数 1
回答已采纳
我正在使用表单的target属性通过jquery/php进行异步文件上传。目标是我的名为“uploads”的iframe；为了处理php文件中的错误，我返回类似"ERR_TOO_LARGE_FILE“的字符串，并在iframe主体中返回一个回显。
问题是，我不知道如何检测iframe何时准备就绪，以及如何访问其内容以查看是否存在错误。我尝试了以下代码，但它不起作用：
$("#uploads").on("load", function() {
alert($(this).html());
});
出现了一个警告框，但里面什么也没有。我也尝试使用re
浏览 0提问于2012-03-19得票数 2
回答已采纳
1回答
如果我点击“搜索”按钮，我想用类搜索通知两个链接(在iframe内)。
如何使用jQuery实现这一目标？
以下是我的HTML代码：
<html>
<head>
<title>TODO</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="btn
浏览 3提问于2017-07-10得票数 0
回答已采纳
我使用下面的代码动态创建一个iframe。
var iframe_jquery = $("<iframe>")
.addClass("foo")
.appendTo(container); // container is a jQuery object containing a <div> which already exists
然后，我想访问它的contentWindow，但它是空的：
var iframe = iframe_jquery.get(0);
if (iframe){ // iFrame exists
浏览 30提问于2012-08-30得票数 59
回答已采纳
2回答
编辑：
修正如下，只需通过将高度和宽度设置为零来隐藏iframe：
<iframe frameborder="0" id="frm" height="0" width="0"></iframe>
var frmurl ='http://www.bbc.co.uk';
jQuery(function($){
$('#frm').attr('src', frmurl);
var doc = $('#frm')[0
浏览 6提问于2013-09-02得票数 1
回答已采纳
5回答
在我们的应用程序中，我们解析一个网页并将其加载到iframe中的另一个页面中。加载的页面中的所有元素都有它们的令牌ID。我需要通过这些令牌I选择元素。意思是-我点击主页上的一个元素，然后在iframe中选择页面中的相应元素。在jQuery的帮助下，我采用了以下方式：
function selectElement(token) {
$('[tokenid=' + token + ']').addClass('border');
}
但是，使用此函数，我只能选择当前页面中的元素，而不能选择iFrame中的元素。谁能告诉我如何选择加载的iF
浏览 29提问于2011-06-12得票数 137
回答已采纳
2回答
等待jquery函数完成
、、、
我的页面中有一个iframe，我正在使用jquery更改它的src属性，问题是我想等到iframe加载之后才调用其他函数。这是我的代码：
HTML:
<div id="content">
<iframe name="mainFrame" id="mainFrame" frameborder="0" scrolling="no"
src="pages/page1.jsp"></iframe>
</div>
JQuery:
浏览 0提问于2013-12-24得票数 0
我在网上尝试了大约50种不同的方法，首先我试着滚动div -然后当它不起作用时，我尝试用div对文件进行iframe并滚动iframe..没有什么是正常工作的！
看看我设置的最后一个脚本：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var t = 100; //arbitrary t
浏览 0提问于2011-06-11得票数 6
回答已采纳
我有以下代码：
<iframe>
<div id="inner_div">
Here's some text!
</div>
</iframe>
我知道如果我在iframe上有一个id，我就可以按照步骤获得一个"#inner_div“的访问器，并且我可以从那里设置高度/宽度。
我还知道，如果我没有家长id，我可以使用声明的标签选择器。
但第二个方法的问题是，当我调用
$('iframe')[0]
在我的代码中，它返回一个HTMLIFrameElement，它不是jQuery对象(所以
浏览 0提问于2012-03-06得票数 0
回答已采纳
我想做一个iframe页面，从其他网站加载页面。我已经尝试过"jQuery iFrame have“来设置iframe中的自动高度...但它是失败的。
有什么问题...？
这是我的代码：
on Head:
<script type="text/javascript" src="js/jquery.js" ></ script >
<script type="text/javascript" src="js/iframe.js"></script >
on Body:
<
浏览 2提问于2009-10-13得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
