jquery 动态加载iframe

jQuery可以方便地动态加载IFrame，即在网页运行过程中，根据需要动态插入一个新的IFrame元素并设置其源URL。以下是一个基本的例子：

// 创建一个新的IFrame元素
var iframe = $("<iframe></iframe>");

// 设置IFrame的属性，比如宽度、高度等
iframe.attr({
  src: "http://example.com", // 需要加载的URL
  width: "500px",
  height: "300px"
});

// 如果你想给IFrame添加id或class，也可以这样做：
iframe.attr("id", "myIframe").addClass("custom-class");

// 将IFrame添加到某个DOM元素内，这里假设我们将其添加到body中
$("body").append(iframe);

// 使用load事件处理函数，当IFrame内容加载完成后执行某些操作
iframe.load(function() {
  console.log("IFrame content loaded.");
});

相关问题

jquery 动态加载iframe并获取中的html

你可以使用 jQuery 的 `$.get()` 方法来动态加载一个 iframe 页面，并获取其中的 HTML 内容。具体实现步骤如下：

1. 创建一个空的 iframe 元素，并将其添加到页面中。

var iframe = $('<iframe>').appendTo('body');

2. 使用 `$.get()` 方法加载 iframe 页面，并将其内容设置为 iframe 的 src 属性。

$.get('iframe_page.html', function(data) {
  iframe.attr('srcdoc', data);
});

3. 使用 `iframe` 的 `contentDocument` 属性获取 iframe 中的文档对象，并获取其中的 HTML 内容。

var iframeDoc = iframe[0].contentDocument;
var htmlContent = iframeDoc.documentElement.innerHTML;

完整代码示例：

var iframe = $('<iframe>').appendTo('body');
$.get('iframe_page.html', function(data) {
  iframe.attr('srcdoc', data);
  var iframeDoc = iframe[0].contentDocument;
  var htmlContent = iframeDoc.documentElement.innerHTML;
  console.log(htmlContent);
});

使用jQuery如何监听iframe页面加载完成

可以使用以下代码来监听iframe页面加载完成：

$(document).ready(function() {
  $('iframe').on('load', function() {
    // iframe页面加载完成后执行的代码
  });
});

其中，`$('iframe')`选择器用于选择所有的iframe元素，`.on('load', function() {})`用于监听iframe页面的load事件，当iframe页面加载完成后，回调函数中的代码将会被执行。