javascript - 如何在Javascript中获取iframe的内容？(How to get the body's content of an iframe in Javascript?)

Question

Welcome To Ask or Share your Answers For Others

javascript - 如何在Javascript中获取iframe的内容？(How to get the body's content of an iframe in Javascript?)

posted Mar 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 如何在Javascript中获取iframe的内容？(How to get the body's content of an iframe in Javascript?)

<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/> ask by omg translate from so

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-03-06T00:54:40+0000

The exact question is how to do it with pure JavaScript not with jQuery.(确切的问题是如何使用纯JavaScript而不是jQuery。)

But I always use the solution that can be found in jQuery's source code.(但是我总是使用可在jQuery源代码中找到的解决方案。) It's just one line of native JavaScript.(这只是本机JavaScript的一行。) For me it's the best, easy readable and even afaik the shortest way to get the iframes content.(对我来说，这是获取iframe内容的最好，最容易理解的方法，甚至是最短的方法。) First get your iframe(首先获取您的iframe) var iframe = document.getElementById('id_description_iframe'); // or var iframe = document.querySelector('#id_description_iframe'); And then use jQuery's solution(然后使用jQuery的解决方案) var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; It works even in the Internet Explorer which does this trick during the contentWindow property of the iframe object.(即使在Internet Explorer中，它也可以工作，该Internet Explorer在iframe对象的contentWindow属性期间可以完成此操作。) Most other browsers uses the contentDocument property and that is the reason why we proof this property first in this OR condition.(大多数其他浏览器都使用contentDocument属性，这就是我们在此OR条件下首先证明此属性的原因。) If it is not set try contentWindow.document .(如果未设置，请尝试contentWindow.document 。) Select elements in iframe(在iframe中选择元素) Then you can usually use getElementById() or even querySelectorAll() to select the DOM-Element from the iframeDocument :(然后，您通常可以使用getElementById()或querySelectorAll()从iframeDocument选择DOM元素：) 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(iframe中的调用函数) Get just the window element from iframe to call some global functions, variables or whole libraries (eg jQuery ):(从iframe仅获取window元素，以调用一些全局函数，变量或整个库（例如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 .(如果遵守同源策略，则所有这一切都是可能的。)

Categories

javascript - 如何在Javascript中获取iframe的内容？(How to get the body's content of an iframe in Javascript?)

javascript - 如何在Javascript中获取iframe的内容？(How to get the body's content of an iframe in Javascript?)

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags