Search code examples
javascriptjqueryiframeinnerhtmlinnertext

Get the innerHTML of an iframe body which is displayed in browser

I have a variable

var s="<p>long content.....</p><p>long content....</p>"

I put this inside a iframe by

$('#iframeid').contents().find('html').html(s);

And I set the translateX of iframeid dynamically based on the browser size. So when the browser is big both the paragraph are shown. And when the browser is small first paragraph is displayed on the browser.

Now when the browser is small I use 

document.getElementById('iframeid').contentWindow.document.body.innerText

And I get "long content....." and when I use 

document.getElementById('iframeid').contentWindow.document.body.innerHTML

I am getting the variable s value completely. I want to get only the html content of the displayed position

Any help is appreciated. Thanks in advance.

Solution

  • I think that it isn't possible...

    I can only suggest to you something that can give you something to getting started on it.

    Jquery, on a big HTML with scroll, how to capture only the visible part of the HTML?

    or you can use this plug-in:

    jQuery.fracs, see the demo: demo

    Probably if you want to show a portion of HTML and get only this visible part you must think up something and probably you can't use iFrame.