利用JQuery操作iframe父页面、子页面的元素和方法汇总

想要利用JQuery操作iframe父页面、子页面的元素和方法，需要分两种情况进行操作。

操作iframe内部元素

如果需要操作iframe内部元素，需要使用contents()方法。具体使用方法如下：

$('#myIframe').contents().find('#innerElementId').html('Hello World!');

这里，#myIframe是iframe元素的id，#innerElementId是iframe内部元素的id，可以通过find()方法获取到该元素，并使用html()方法修改该元素的内容。如果需要获取iframe内部元素的值，可以使用val()方法。

操作iframe外部元素

如果需要操作iframe外部元素，需要先获取到iframe元素，并使用contents()方法获取该iframe的内容，然后便可以在外部元素中获取或者修改内部元素的值。具体如下：

var iframe = $('#myIframe');
var iframeContent = iframe.contents();

// 获取内部元素的值
var innerElementVal = iframeContent.find('#innerElementId').val();
console.log(innerElementVal);

// 修改内部元素的值
iframeContent.find('#innerElementId').val('newValue');

这里，#myIframe是iframe元素的id，可以使用jQuery()方法获取到该元素，然后使用contents()方法获取该iframe的内容。接着可以通过find()方法获取到该内容中的子元素，并使用val()方法获取或修改该元素的值。

示例1：在iframe执行完毕后调用父页面中的方法

// 子页面iframe中调用父页面的方法
parent.testFunction();

// 父页面中定义方法
function testFunction() {
    console.log('This is a test function!');
}

在子页面中使用parent获取到父页面的window对象，并可以直接调用该对象中的方法。

示例2：在父页面中修改iframe内部元素的值

var iframe = $('#myIframe');
var iframeContent = iframe.contents();

// 修改内部元素的值
iframeContent.find('#innerElementId').val('newValue');

在父页面中获取到iframe元素，再使用contents()方法获取到该iframe的内容，即可在外部环境中获取或修改该iframe内部元素的值。