jquery操作 iframe的方法

下面是详细讲解 jQuery 操作 iframe 的方法的完整攻略。

一、通过选择器选中 iframe

在 jQuery 中可以使用选择器选中 iframe 元素。以下是一个示例：

// 选中 id 为 iframe1 的 iframe 元素
var $iframe = $('#iframe1');

// 获取 iframe 内部文档对象
var iframeDoc = $iframe[0].contentDocument || $iframe[0].contentWindow.document;

在上面的示例中，我们使用 jQuery 的选择器选中了 id 为 iframe1 的 iframe 元素，然后获取了它的内部文档对象，以便进一步操作。

二、操作 iframe 内部的元素

有了 iframe 的内部文档对象之后，就可以像操作普通页面元素一样来操作 iframe 内部的元素。以下是一个示例：

// 选中 id 为 iframe1 中的按钮
var $btn = $('#iframe1').contents().find('#btn');

// 绑定按钮点击事件
$btn.click(function() {
  alert('按钮被点击了！');
});

在上面的示例中，我们先通过 contents() 方法获取了 iframe 的内部文档对象，然后使用 find() 方法选中了其中的按钮元素，并绑定了点击事件。

三、动态创建 iframe

除了选中已有的 iframe 元素，还可以通过 jQuery 动态创建一个 iframe 元素，以下是一个示例：

// 创建 iframe 元素
var $iframe = $('<iframe>');

// 设置 iframe 的宽高和 src 属性
$iframe.attr({
  width: '100%',
  height: '500',
  src: 'http://www.example.com'
});

// 将 iframe 添加到页面中
$('body').append($iframe);

在上面的示例中，我们通过 $('<iframe>') 创建了一个新的 iframe 元素，然后设置了它的宽高和 src 属性，并将其添加到页面中。

以上就是操作 iframe 的方法的完整攻略，希望能对您有所帮助。