jQuery从主页面存取控制 iframe 中的元素,参数及方法

时间:2023-01-30 06:38:16

从主页面上获取iframe下的某个对象,或使用iframe下的方法,或是获取iframe下某个doc元素,要求兼容各类浏览器,不仅仅ie;

$(function() {
$('#abgne_iframe').load(function(){
var $iframe = $(this),
$contents = $iframe.contents(); // 取得 iframe 中的元素
$('#btn1').click(function(){
alert($contents.find('#t1').val());
}); // 設定 iframe 中的元素
$('#btn2').click(function(){
$contents.find('#t2').val('我的值是由外部指定的!!');
$contents.find('#t2').css('color', 'red');
}); // 控制 iframe 中的按鈕觸發事件
$('#btn3').click(function(){
$contents.find('#sbtn1').click();
}); // 執行 iframe 中定義的方法
$('#btn4').click(function(){
$iframe.get(0).contentWindow.iframeMethod();
}); // 執行各種動作時可以再判斷 $contents 是否為 null
});
});

从上面可以看出:

1、获取iframe下面的某元素时使用jQuery("#frameId").contents().find("#inputId") 可以获取到ID="inputId"的元素;

2、获取iframe下的某方法或某全局对象使用jQuery("#frameId").get(0).contentWindow.iframeMethod(); / jQuery("#frameId").get(0).contentWindow.globalObject;

资料参考页面:http://abgne.tw/jquery/jquery-tips/jquery-access-iframe-element-func.html