Javascript jQuery:嵌套框架集中的访问框架
我有一个有嵌套框架集的文档。我需要访问一个名为“sq_main”的嵌套框架,并访问该框架内的内容。以下是我的结构:Javascript jQuery:嵌套框架集中的访问框架,javascript,jquery,frames,frameset,Javascript,Jquery,Frames,Frameset,我有一个有嵌套框架集的文档。我需要访问一个名为“sq_main”的嵌套框架,并访问该框架内的内容。以下是我的结构: <html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <frameset rows="28,*" frameborder="0" bord
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="28,*" frameborder="0" border="0">
<frame src="/_admin/?SQ_BACKEND_PAGE=header" name="sq_header" scrolling="no" marginwidth="0" marginheight="0">
<frameset cols="380,10,*" frameborder="0" border="0" id ="main_frameset">
<frame src="/_admin/?SQ_BACKEND_PAGE=sidenav" name="sq_sidenav" scrolling="no" marginwidth="0" marginheight="0">
<frame src="/_admin/?SQ_BACKEND_PAGE=resizer" name="sq_resizer" scrolling="no" marginwidth="0" marginheight="0">
<frame src="/_admin?SQ_BACKEND_PAGE=main&assetid=43&sq_from_frontend=1" name="sq_main" marginwidth="0" marginheight="0" scrolling="yes">
</frameset>
</frameset>
<noframes></noframes>
</html>
标题
遗憾的是,我无法更改代码,这就是为什么我需要使用jQuery访问它。我曾尝试编写一个jQuery选择器来访问“sq_main”框架,但到目前为止没有成功:
$('body', parent.frames[0].sq_main).prepend('<h1>TEST!!!!</h1>');
$('body',parent.frames[0].sq_main.prepend('TEST!!!!');
关于如何深入了解这一丑陋结构的想法?:) 尝试一次导航一个步骤。IIRC中,
frames
数组仅适用于iframes
。请尝试选择框[name='sq_main']
例如:
var frameDocument=$('frame[name=“mainFrame”]”,top.document)[0];
$(frameDocument).find('body').prepend('TEST!!!!');
frames.html
另一页.html
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
//您可以指定部分版本号,如“1”或“1.3”,
//同样的结果。这样做将自动加载
//与该部分修订模式匹配的最新版本
//(例如,1.3将在今天加载1.3.2,1将加载1.7.2)。
load(“jquery”,“1.6.2”);
setOnLoadCallback(函数(){
//将init代码放在此处,而不是$(document).ready()
});
var d=新日期();
var n=d.getTime();
$(文档).ready(函数(){
$('#title').html($(($).html());
/*
这是在safari工作
请参阅“下面提供的更新答案…看起来可能需要设置超时,因为初始启动脚本运行时未加载帧。-David Hoerster 2010年8月21日16:38
网址:http://stackoverflow.com/questions/3534082/jquery-access-table-inside-a-frame
*/
setTimeout(writemsg,2000);
函数writemsg(){
$('#helloworld',top.frames[“sq_main”].document).html(“从“+$(“title”).html()+”写入sq_main中的“+n”);
}
});
你好,世界JQuery!
helloworld.html
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
//您可以指定部分版本号,如“1”或“1.3”,
//具有相同的结果。这样做将自动加载
//与该部分修订模式匹配的最新版本
//(例如,1.3将在今天加载1.3.2,1将加载1.7.2)。
load(“jquery”,“1.6.2”);
setOnLoadCallback(函数(){
//将init代码放在此处,而不是$(document).ready()
});
$(文档).ready(函数(){
$('#title').html($(($).html());
});
你好,世界JQuery!
我在您的示例中找不到sq_main
;该示例的内容上方的代码是sq_main
还是缺少什么?是的,在示例中它是正确的,它是最后一帧。我尝试了:警报($($($frame[name='sq_main'])。子项('.\sq search wait pop details')。text());但这似乎不起作用..Re 1,应该使用frameset而不是body元素:@starwed:谢谢,我已经修正了我的答案。您好,可以用本机javascript来做吗。@mohit:当然可以,但我建议为框架分配ID,这样您就可以使用getElementById()
否则,按标记获取元素并搜索结果。
var frameDocument = $('frame[name="mainFrame"]', top.document)[0].contentDocument;
$(frameDocument).find('body').prepend('<h1>TEST!!!!</h1>');
var sql_mainJQ = $("frame[name='sql_main']", top.document);
//$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :( Bad
var frameContent = sql_mainJQ[0].contentDocument;
if ($.browser.msie) {
frameContent = mainFrameJQ[0].contentWindow.document;
} else {
frameContent = mainFrameJQ[0].contentDocument;
}
$('body', sql_mainJQ.contents()).prepend("TEST!!!!"); // :> Maybe OK!
<html>
<head>
<title>frames.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<frameset rows="100,*" frameborder="1" border="2">
<frame src="helloworld.html" name="sq_header" id="sq_header" scrolling="yes" marginwidth="0" marginheight="0">
<frameset cols="380,300,*" frameborder="1" border="2" id ="main_frameset">
<frame src="helloworld.html" name="sq_sidenav" id="sq_sidenav" scrolling="yes" marginwidth="0" marginheight="0">
<frame src="anotherpage.html" name="sq_resizer" id="sq_resizer" scrolling="yes" marginwidth="0" marginheight="0">
<frame src="helloworld.html" name="sq_main" id="sq_main" marginwidth="0" marginheight="0" scrolling="yes">
</frameset>
</frameset>
<noframes>
</noframes>
</html>
<html>
<head>
<title>anotherpage.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="Javascript">
var d = new Date();
var n = d.getTime();
$(document).ready(function(){
$('#title').html($("title").html());
/*
this is to work in safari
see "Updated answer provided below....looks like a setTimeout maybe needed as the frames aren't loaded when the initial startup script runs. – David Hoerster Aug 21 '10 at 16:38
url: http://stackoverflow.com/questions/3534082/jquery-access-table-inside-a-frame
*/
setTimeout(writemsg, 2000);
function writemsg() {
$('#helloworld',top.frames["sq_main"].document).html("Write from "+ $("title").html()+" in sq_main at "+ n);
}
});
</script>
</head>
<body>
<div id="title">
</div>
</p>
<div id="helloworld">
Hello World JQuery!</div>
</body>
</html>
<html>
<head>
<title>helloworld.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/
// You may specify partial version numbers, such as "1" or "1.3",
// with the same result. Doing so will automatically load the
// latest version matching that partial revision pattern
// (e.g. 1.3 would load 1.3.2 today and 1 would load 1.7.2).
google.load("jquery", "1.6.2");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
});
</script>
<script language="Javascript">
$(document).ready(function(){
$('#title').html($("title").html());
});
</script>
</head>
<body>
<div id="title">
</div>
</p>
<div id="helloworld">
Hello World JQuery!</div>
</body>
</html>