写一个jquery等待iframe加载完成后获取其中元素的示例

以下是一个等待 iframe 加载完成后获取其中元素的示例代码：

$(document).ready(function() {
  var iframe = $('#my-iframe')[0];
  var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  
  $(iframeDoc).ready(function() {
    var iframeElem = $(iframeDoc).find('#my-element');
    console.log(iframeElem.text());
  });
});

在这个示例中，我们首先选择了一个 iframe 元素，并获取了其 contentDocument 或 contentWindow.document 属性。然后，我们在 iframe 的文档加载完成时使用 jQuery 的 ready() 方法来获取 iframe 中的元素。最后，我们使用 jQuery 的 find() 方法来选择需要获取的元素，并使用 text() 方法获取其文本内容。

相关问题

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);
});

adjx替代多个iframe

Ajax（Asynchronous JavaScript and XML）可以用来异步地向服务器请求数据，然后将返回的数据动态地更新到页面上，从而避免了使用多个iframe所带来的问题。

使用Ajax可以让页面更加快速和简洁，也可以提高用户体验。下面是一个使用Ajax实现动态加载内容的示例：

<div id="content"></div>
<button id="load-btn">加载内容</button>

<script>
  const contentDiv = document.getElementById('content');
  const loadBtn = document.getElementById('load-btn');

  loadBtn.addEventListener('click', () => {
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (this.readyState === 4 && this.status === 200) {
        contentDiv.innerHTML = this.responseText;
      }
    };
    xhr.open('GET', 'example.com/content.html', true);
    xhr.send();
  });
</script>

在上面的示例中，当用户点击“加载内容”按钮时，通过Ajax向服务器请求content.html页面的内容，并将返回的数据更新到页面上。这样就可以实现动态加载内容，避免了使用多个iframe所带来的问题。

除了原生的Ajax，还可以使用第三方库，如jQuery和axios等来简化Ajax的使用。