More Group Sites
Education Books
School Rankings
Jobless Net
Better Home
Enviro++
更好教育论坛


Help | Subscribe/Unsubscribe | Rules | Other Group Sites: Better Education | Better Education Forum
Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Share
Options
View
Go to last post Go to first unread
hong  
#1 Posted : Sunday, 6 March 2016 3:36:46 PM(UTC)
hong

Rank: Administration

Reputation:

Groups: AcademicCoachingSchool, admin, Administration, BookSeller, CatholicSchool, CoachingAdult, CoachingProfessional, CoachingSports, ExtraCurriculumCoaching, IndependentSchool, Moderator, MusicTeacher, PrivateSchool, PublicSchool, SelectiveSchool, tutor
Joined: 23/11/2008(UTC)
Posts: 520

Load external site page html, image, or non-html such as pdf and interactive content

How to load an image and fit to a window or div
Code:
<div style="width: 100%; height: 500px"><img src="http://bettereducation.com.au/uploads/images/school%20zones/CamberwellPS_zone-1030x728.jpg" style="max-width: 100%;max-height: 100%;"></img></div>

Note that the CSS style "max-width: 100%;max-height: 100%;" will fit the image to the div.

Load an external web page html (external site) or non-html (such as pdf and interactive content)
Code:
<div><object type="text/html" data="http://www.norwoodps.sa.edu.au/images/NPS%20zone.pdf" style="overflow:auto; width: 100%; height: 500px"></object></div>
<div><object type="application/pdf" data="http://www.norwoodps.sa.edu.au/images/NPS%20zone.pdf" style="overflow:auto; width: 100%; height: 100vh;"></object></div>
<div><object type="text/html" data="www.mckinnonsc.vic.edu.au/p/zone.html" style="overflow:auto; width: 100%; height: 500px"></object></div>

Note that the CSS style overflow:auto; width: 100%; height: 100vh" won't be a perfect fit to page. As a workaround, we style the iframe by giving it a relative height value in viewport units (vh) instead of absolute pixels..

We used img and object tags above. Using object tags, loading an external PDF file is just like loading an external web page.

There are more elements available for inserting external domain contents. We can use iframe, embed and object elements.

<iframe>
Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well.
Code:
<iframe src="images/myimage.pdf" width="800px" height="600px" />


There's no need to use jQuery, CSS even asp.net or php if the site isn't preventing itself from being iframed. Otherwise you may need to use file_get_contents, then display the data retrieved in a div or another non-iframe element.

<embed>
The embed element provides an integration point for an external (typically non-HTML) application or interactive content.
Compared with <object> element, it's older. It was a non standard tag. Behaviour prior to HTML 5 can vary. However, it's been standardised in HTML 5.
Code:
<embed src="myfile.pdf" width="800px" height="2100px">
or
<object data="myfile.pdf" type="application/pdf">
    <embed src="myfile.pdf" type="application/pdf" />
</object>


<object>
The <object> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin.
Include a pdf file with object element:
Code:
<object data="myfile.pdf" type="application/pdf" width="800px" height="2100px">
  alt : <a href="myfile.pdf">My PDF file</a>
</object>


jQuery

Apart from using the simple html above, you can use jQuery.

Code:
<script>
        $("#siteloader")
            .html('<object data="http://mysite.com"/>');
</script>
or
<script>$("#siteloader").load("http://mysite.com/mypage.html");</script>
<div id="siteloader"></div>

Edited by user Sunday, 6 March 2016 4:59:40 PM(UTC)  | Reason: Not specified

Sponsor
Rss Feed  Atom Feed
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.