Using iFrame to show only a certain part of another page of mine?

Hero · July 5, 2016

Hi!

Can I use iFrame to show/select only a certain part of another html page on my own website?

It's extra relevant when printing the page(!)

The page I want to include a part of is http://www.transformation.dk/Transformationen.html

Thank you very much.

Henrik

Ingolme · July 5, 2016

Frames only load the whole page, and in general it's a bad idea to use frames at all. What do these pages have that you can't put on your own website?

dsonesuk · July 6, 2016

Yes! you can print partial content of iframe page, but the partial content in question has to have a identifier such as id ref, I did the same thing many years ago.

Hero · July 6, 2016

Yes! you can print partial content of iframe page, but the partial content in question has to have a identifier such as id ref, I did the same thing many years ago.

Great! Thanks! Can you explain a little more or refer me to an example?

dsonesuk · July 6, 2016

Note this prints partial iframe content only, but gives you idea how to access iframe content to manipulate further FOR SAME DOMAIN iframe.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">
            var OriginalPageContents = "";
            $(function() {
                $("body").on('click', 'a#print-link', function() {
                    OriginalPageContents = $('body').clone(true);

                    var Iframe_content_area_to_print = $("#original_iframe_content").contents().find('#Iframe_content_area_to_print').html();
                    $("body").html("");
                    $('body').html(Iframe_content_area_to_print);
                    window.print();
                    $("body").remove();
                    $("html").append(OriginalPageContents);

                });


            });
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <h1>Normal page with Iframe</h1>
        <div>
            <a id="print-link" href="javascript:void(null);">Print</a>
            <iframe  id="original_iframe_content" name="original_iframe_content" src="LOCALIframePage.html" scrolling="no" frameborder="0" style="width: 100%; height: 80vh;"></iframe>


        </div>
    </body>
</html>

Hero · July 7, 2016

Note this prints partial iframe content only, but gives you idea how to access iframe content to manipulate further FOR SAME DOMAIN iframe.

Thanks.

That html-file contains the iframe which refers to "LOCALIframePage.html". Can you show me that file, to see how you mark the interesting part of the page?

Thank you very much.

dsonesuk · July 7, 2016

In the page sourced by iframe that has element with id ref of 'Iframe_content_area_to_print' will have all text within that element accessible for printing.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div>
            <h1>Iframe Page</h1>
            <div>
                <h2>NOT for PRINT#1</H2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
                </p>


            </div>

            <div>

                <div id="Iframe_content_area_to_print" style="background: yellow;">
                    <h2>YES Print This </H2>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                    <p>
                        Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
                    </p>

                </div>
            </div>
            <div>
                <h2>NOT for PRINT#2</H2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
                <p>
                    Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
                </p>


            </div>

        </div>
    </body>
</html>

Edited July 7, 2016 by dsonesuk

Hero · July 7, 2016

In the page sourced by iframe that has element with id ref of 'Iframe_content_area_to_print' will have all text within that element accessible for printing.

Thank you very much.

I think I understand how it all works. I will be testing it on my website soon. There is just one peculiarity. :-)

The first html file you gave me also uses the id ref "#original_iframe_content", but that doesn't exist in the second file you gave me. :-)

dsonesuk · July 7, 2016

Its the id ref to the iframe, you access the iframe by id, then element id ref within that iframe page.

Hero · July 8, 2016

Its the id ref to the iframe, you access the iframe by id, then element id ref within that iframe page.

Well... I must admit that I did NOT fully understand how it works. And we have a slight misunderstanding: I don't want to print less than what is shown in the iframe-block, but I want the iframe-block to only show a part of the src web-page it points to. How do I do that? :Pleased:

dsonesuk · July 8, 2016

Like I said, I showed you how to access iframe page to manipilaate it, you can now manipulate it to hide all other content but the content you which to show.

Hero · July 11, 2016

Like I said, I showed you how to access iframe page to manipilaate it, you can now manipulate it to hide all other content but the content you which to show.

Well, thank you. But I am sorry I can't make it work the way I want.

I can't see how to get the iframe-command to only show part of the source-page it refers to?

I have put a slightly modified version of your example on my website here:

http://www.transformation.dk/iframeexample.html

dsonesuk · July 11, 2016

1) on iframe load ( $("#original_iframe_content").on('load', function() { ....clone append code here }); ), clone '#Iframe_content_area_to_print' and all child elements of iframe page, basically the same as getting html() as shown in example but this time cloning instead.

2) find 'body' element ( instead of find 'find('#Iframe_content_area_to_print')' ) clear all current child elements with empty string '', and then append with previously cloned code of '#Iframe_content_area_to_print'.

OR (this depends on page layout)

1) on iframe load ( $("#original_iframe_content").on('load', function() { ....code here }); ) apply .hide() on all parent div elements of content but not() on parent div element of div with id ref ''#Iframe_content_area_to_print'

Edited July 11, 2016 by dsonesuk

Hero · July 11, 2016

Dear dsonesuk

I am sorry to have bothered you with these questions. I am not a javascript programmer, so I don't really understand your instructions.

dsonesuk · July 11, 2016

Dear hero, I'm truly sorry you don't understand JavaScript/jQuery, but if you were to go through w3schools tutorials provided for JavaScript and jQuery library usage, then maybe you WILL understand my instructions.

Hero · July 17, 2016

Dear hero, I'm truly sorry you don't understand JavaScript/jQuery, but if you were to go through w3schools tutorials provided for JavaScript and jQuery library usage, then maybe you WILL understand my instructions.

OK. Now I got it to work.

I can't really say that I used much of your last instructions.

I did some more searches, and I found this:

http://stackoverflow.com/questions/3272071/iframe-to-only-show-a-certain-part-of-the-page

There I found the following single JS line that uses jQuery:

$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');

Then I started reading the W3schools.com JS tutorial, and when I got to "JS Output" I was enabled to 'concoct' these 2 pages:

http://www.transformation.dk/iframeexample.html

http://www.transformation.dk/LOCALIframePage.html

So there might be an even more elegant solution, or maybe a very experienced JS programmer can point out some weaknesses in certain browsers etc., but I only use that single JS-line mentioned above! Everything else is just HTML and CSS. And even <iframe> became obsolete and has vanished from the above mentioned "iframeexample.html"!!

So thank you very much for your help!

Best regards,

H.R.

Using iFrame to show only a certain part of another page of mine?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in