jQuery控制iFrame(实例代码)

前端技术 2023/09/04 JavaScript

用jQuery在IFRAME里取得父窗口的某个元素的值
只好用DOM方法与jquery方法结合的方式实现了

1.在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames[\"iframe1\"].document).find(”input[@type=\'radio\']“).attr(”checked”,”true”);

2.在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find(”input[@type=\'radio\']“).attr(”checked”,”true”);

iframe框架的：

<iframe src=”test.html” id=”iframe1″ width=”700″ height=”300″ frameborder=”0″ scrolling=”auto”></iframe>

IE7中测试通过

代码：

复制代码 代码如下:

<!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>
    <title>jQuery控制iframe</title>
    <script type=\"text/ecmascript\" src=\"../js/jquery-1.2.6.js\"></script>
    <script type=\"text/javascript\">
        $(function(){
            $(\"#t1\").hover(function(){alert(\'\');});
            //$(\"iframe\").contents().find(\"body\").append(\"I\'m in an iframe!\");
            //$(window.frames[\"iframe1\"].document).find(\"input[@type=\'text\']\").attr(\"size\",\"30px\");
            //$(\"#iframe1\").contents().find(\"#d1\").css(\'color\',\'red\');
            //$(window.frames[\"iframe1\"].document).find(\"input[@name=\'t1\']\").css({background:\"#369\"});
            //$(\"#iframe1\").src(\"test.html\");
        });
    </script>
</head>
<body>
<div>
<input type=\"text\" id=\"t1\" />
<iframe id=\"iframe1\" src=\"child.htm\"></iframe>
<iframe src=\"child.htm\" width=\"300\" height=\"100\"></iframe>
</div>
<div>
</div>
</body>
</html>

使用jquery操作iframe

1、内容里有两个ifame

<iframe id=\"leftiframe\"...</iframe>
<iframe id=\"mainiframe..</iframe>

leftiframe中jQuery改变mainiframe的src代码：
$(\"#mainframe\",parent.document.body).attr(\"src\",\"http://www.phpstudy.net\")

2、如果内容里面有一个ID为mainiframe的ifame
<iframe id=\"mainifame\"...></ifame>
ifame包含一个someID
<div id=\"someID\">you want to get this content</div>
得到someID的内容

$(\"#mainiframe\").contents().find(\"someID\").html() html 或者 $(\"#mainiframe\").contains().find(\"someID\").text()值

3、在父窗口中操作 选中IFRAME中的所有单选钮
$(window.frames[\"iframe1\"].document).find(\"input[@type=\'radio\']\").attr(\"checked\",\"true\");

那选择id自然就是依然使用find方法
$(window.frames[\"iframe1\"].document).find(\"#id\")

本文地址：https://www.stayed.cn/item/11477

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案