如何在 Javascript 中获取 iframe 的正文内容?

本文介绍了如何在 Javascript 中获取 iframe 的正文内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

</iframe>

我想得到的是:

test

解决方案

确切的问题是如何使用纯 JavaScript 而不是 jQuery.

但我总是使用可以在 jQuery 源代码中找到的解决方案.它只是一行原生 JavaScript.

对我来说，这是最好的、易读的，甚至是afaik获取 iframe 内容的最短方法.

首先获取您的 iframe

var iframe = document.getElementById('id_description_iframe');//或者var iframe = document.querySelector('#id_description_iframe');

然后使用jQuery的解决方案

var iframeDocument = iframe.contentDocument ||iframe.contentWindow.document;

它甚至可以在 Internet Explorer 中工作，它在 iframe 对象的 contentWindow 属性期间执行此技巧.大多数其他浏览器使用 contentDocument 属性，这就是我们在此 OR 条件中首先证明此属性的原因.如果未设置，请尝试 contentWindow.document.

选择 iframe 中的元素

然后你通常可以使用 getElementById() 甚至 querySelectorAll() 从 iframeDocument 中选择 DOM-Element:

if (!iframeDocument) {抛出在 DOM 中找不到 iframe.";}var iframeContent = iframeDocument.getElementById('frameBody');//或者var iframeContent = iframeDocument.querySelectorAll('#frameBody');

在 iframe 中调用函数

仅从 iframe 中获取 window 元素以调用一些全局函数、变量或整个库(例如 jQuery):

var iframeWindow = iframe.contentWindow;//你甚至可以调用 jQuery 或其他框架//如果它是在 iframe 中加载的iframeContent = iframeWindow.jQuery('#frameBody');//或者iframeContent = iframeWindow.$('#frameBody');//甚至使用任何其他全局变量iframeWindow.myVar = window.myVar;//或者调用一个全局函数var myVar = iframeWindow.myFunction(param1/*, ... */);

注意

如果您遵守同源政策，这一切都是可能的.

<iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description">
  <html>
    <head></head>
    <body class="frameBody">
      test<br/>
    </body>
  </html>
</iframe>

What I want to get is:

test<br/>

解决方案

The exact question is how to do it with pure JavaScript not with jQuery.

But I always use the solution that can be found in jQuery's source code.It's just one line of native JavaScript.

For me it's the best, easy readable and even afaik the shortest way to get the iframes content.

First get your iframe

var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');

And then use jQuery's solution

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Select elements in iframe

Then you can usually use getElementById() or even querySelectorAll() to select the DOM-Element from the iframeDocument:

if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');

Call functions in the iframe

Get just the window element from iframe to call some global functions, variables or whole libraries (e.g. jQuery):

var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Note

All this is possible if you observe the same-origin policy.

这篇关于如何在 Javascript 中获取 iframe 的正文内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

With

如何在 Javascript 中获取 iframe 的正文内容?

问题描述