Include the content from other webpages: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
mNo edit summary
 
(27 intermediate revisions by 2 users not shown)
Line 1: Line 1:
Multiple approached for including the content from other webpages
Multiple approaches for including the content from other webpages or files


= usage =
= Usage =
# seperate the navigation and content into two parts
# seperate the navigation and content into two parts
# compare the content from two webpages
# compare the content from two webpages


= approach =
== Comparison of iframe and ajax ==
== frame or iframe ==
* frame or [http://www.w3.org/TR/html401/present/frames.html#h-16.5 iframe tag], [http://www.w3.org/TR/html4/struct/objects.html#h-13.5 object tag]
** 缺點是瀏覽器上的鏈結，非該篇網頁的靜態鏈結。
** cross frame layers


# Load data<ref>[https://stackoverflow.com/questions/382662/what-are-the-differences-between-using-an-iframe-and-ajax-to-include-the-content What are the differences between using an iframe and ajax to include the contents of an external page? - Stack Overflow]</ref>
#* iframe: available
#* ajax: available
# CSS rules were infected from original page called
#* iframe: No
#* ajax: Yes, Need to consider the CSS issue {{exclaim}}
# Callback actions called after loaded the content
#* iframe: Available<ref>[https://stackoverflow.com/questions/164085/javascript-callback-when-iframe-is-finished-loading events - Javascript callback when IFRAME is finished loading? - Stack Overflow]</ref> ''not verified''
#* ajax: Available<ref>[http://api.jquery.com/jquery.ajax/ jQuery.ajax() | jQuery API Documentation]</ref>


== Apache ==
== file included was locate on different server ==
* [http://httpd.apache.org/docs/1.3/howto/ssi.html Server side includes][http://dob.tnc.edu.tw/themes/old/showPage.php?s=1997&t=3&at=]({{Acronym | acronym=SSI | def=Server Side Include}})
<table border="1">
<tr>
  <th>remote website -> origin website</th>
  <th>embed remote image file</th>
  <th>execute javascript file</th>
  <th>ajax call remote json file</th>
</tr>
<tr>
  <td>remote: url start with http not https -> origin: localhost</td>
  <td>ok</td>
  <td>ok</td>
  <td>Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"</td>
</tr>
<tr>
  <td>remote: url start with https -> origin: localhost</td>
  <td>ok</td>
  <td>ok</td>
  <td>Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"</td>
</tr>
<tr>
  <td>remote: url start with http -> origin: https</td>
  <td>ok</td>
  <td>Error: "Mixed Content: The page at 'https://website' was loaded over HTTPS, but requested an insecure script 'http://remote_website/file.js'. This request has been blocked; the content must be served over HTTPS.
"</td>
  <td>Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"</td>
</tr>
<tr>
  <td>remote: url start with https -> origin: http</td>
  <td>ok</td>
  <td>ok</td>
  <td>Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"</td>
</tr>
</table>
 
error message
 
<pre>
Access to XMLHttpRequest at 'http://remote.website/test.json' from origin 'http://local.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 
jquery-3.3.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://remote.website/test.json with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
 
Mixed Content: The page at 'https://local.website/test.php' was loaded over HTTPS, but requested an insecure script 'http://remote.website/test.js'. This request has been blocked; the content must be served over HTTPS.
 
</pre>


= client-side approach =
== Frame or iframe ==
frame or [http://www.w3.org/TR/html401/present/frames.html#h-16.5 iframe tag]
* 缺點是瀏覽器上的鏈結，非該篇網頁的靜態鏈結。
* 額外需要處理的議題：(1)點選連結，內容會直接顯示在 frame 內，如果 frame 太小，會需要額外處理。例如：frame內的連結，以新視窗開啟。(2)[http://webdesign.about.com/od/iframes/a/iframes-and-css.htm Iframes and CSS - Styling Iframes With CSS]
* cross frame layers


[https://www.w3schools.com/tags/tag_object.asp HTML object tag][http://www.w3.org/TR/html4/struct/objects.html#h-13.5]
* code: {{kbd | key=<nowiki><object width="400" height="400" data="path/to/plain_text.txt"></object></nowiki>}}


== javascript ==
== Javascript ==
* general ([http://www.netmechanic.com/news/vol4/javascript_no9.htm JavaScript Tip:  Page Headers And Footers])
* general ([http://www.netmechanic.com/news/vol4/javascript_no9.htm JavaScript Tip:  Page Headers And Footers])


  <script language="JavaScript" type="text/javascript" src="path/to.js"></script>
  <script language="JavaScript" type="text/javascript" src="path/to.js"></script>
  <noscript><a href="URL">Description</a><noscript>
  <noscript><a href="URL">Description</a><noscript>
jQuery [http://api.jquery.com/load/ .load()] or [http://api.jquery.com/jquery.ajax/ jQuery.ajax()]
* the code of "Click event" should written in the loaded file.
= Server-side approach =
== Apache ==
* [http://httpd.apache.org/docs/1.3/howto/ssi.html Server side includes][http://dob.tnc.edu.tw/themes/old/showPage.php?s=1997&t=3&at=]({{Acronym | acronym=SSI | def=Server Side Include}})
== CMS software or Wiki softwares ==
CMS softwares
* [https://pantheon.io/decoupled-cms Decoupled CMS: Why “Going Headless” Is Becoming So Popular | Pantheon] {{access | date=2017-09-12}}
Wiki softwares
* [[DokuWiki]]: [[DokuWiki export]] or use the plugin [https://www.dokuwiki.org/plugin:getraw plugin:getraw]
* Mediawiki:
** [[MediaWiki Template]] or transclude syntax([[Mediawiki formatting rules]])
** Include the content of wiki page from other software [https://www.mediawiki.org/wiki/API:FAQ#get_the_content_of_a_page_.28HTML.29.3F API:FAQ - MediaWiki] ex: https://meta.wikimedia.org/w/index.php?title=Spam_blacklist&action=raw&sb_ver=1 {{access | date = 2016-02-16}}
* [[Oddmuse wiki]]: [http://www.oddmuse.org/cgi-bin/wiki/Transclusion Transclusion] means to include a wiki page from elsewhere into your current page
Other softwares
* [[MovableType]]: template modules, or [http://www.sixapart.com/pronet/plugins/plugin/multiblog.html MultiBlog] plugin


== PHP require / include function ==
== PHP require / include function ==
Line 37: Line 116:
** [http://antbsd.twbbs.org/~ant/wordpress/?p=3966 Resolving PHP Relative Paths Problems - Ant's ATField]
** [http://antbsd.twbbs.org/~ant/wordpress/?p=3966 Resolving PHP Relative Paths Problems - Ant's ATField]


== wiki softwares ==
= further reading =
* [[DokuWiki export]]
* Boutell.Com, Inc. (2007). [http://www.boutell.com/newfaq/creating/include.html How Do I Include One HTML File in Another?] / Jennifer Kyrnin (n.d.). [http://webdesign.about.com/od/ssi/a/aa052002a.htm]
* Mediawiki: [[MediaWiki Template]] or transclude syntax([[Mediawiki formatting rules]])
* [http://stackoverflow.com/questions/676394/how-to-include-an-html-page-into-an-html-page How to include an html page into an html page]
* [[Oddmuse wiki]]: [http://www.oddmuse.org/cgi-bin/wiki/Transclusion Transclusion] means to include a wiki page from elsewhere into your current page
* [https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS 跨來源資源共用（CORS） | MDN]
 
* [https://stackoverflow.com/questions/7564832/how-to-bypass-access-control-allow-origin php - how to bypass Access-Control-Allow-Origin? - Stack Overflow]
== other software ==
other software
* [[MovableType]]: template modules, or [http://www.sixapart.com/pronet/plugins/plugin/multiblog.html MultiBlog] plugin


References


= further reading =
<references />
* Boutell.Com, Inc. (2007). [http://www.boutell.com/newfaq/creating/include.html How Do I Include One HTML File in Another?] / Jennifer Kyrnin (n.d.). [http://webdesign.about.com/od/ssi/a/aa052002a.htm]


[[Category:Web_Dev]]
[[Category:Programming]] [[Category:Web_Dev]] [[Category:Wiki]]

Latest revision as of 15:27, 11 February 2019

Multiple approaches for including the content from other webpages or files

Usage[edit]

  1. seperate the navigation and content into two parts
  2. compare the content from two webpages

Comparison of iframe and ajax[edit]

  1. Load data[1]
    • iframe: available
    • ajax: available
  2. CSS rules were infected from original page called
    • iframe: No
    • ajax: Yes, Need to consider the CSS issue Icon_exclaim.gif
  3. Callback actions called after loaded the content
    • iframe: Available[2] not verified
    • ajax: Available[3]

file included was locate on different server[edit]

remote website -> origin website embed remote image file execute javascript file ajax call remote json file
remote: url start with http not https -> origin: localhost ok ok Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"
remote: url start with https -> origin: localhost ok ok Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"
remote: url start with http -> origin: https ok Error: "Mixed Content: The page at 'https://website' was loaded over HTTPS, but requested an insecure script 'http://remote_website/file.js'. This request has been blocked; the content must be served over HTTPS. " Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"
remote: url start with https -> origin: http ok ok Error: "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

error message 

Access to XMLHttpRequest at 'http://remote.website/test.json' from origin 'http://local.website' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

jquery-3.3.1.min.js:2 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://remote.website/test.json with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Mixed Content: The page at 'https://local.website/test.php' was loaded over HTTPS, but requested an insecure script 'http://remote.website/test.js'. This request has been blocked; the content must be served over HTTPS.

client-side approach[edit]

Frame or iframe[edit]

frame or iframe tag

  • 缺點是瀏覽器上的鏈結，非該篇網頁的靜態鏈結。
  • 額外需要處理的議題：(1)點選連結，內容會直接顯示在 frame 內，如果 frame 太小，會需要額外處理。例如：frame內的連結，以新視窗開啟。(2)Iframes and CSS - Styling Iframes With CSS
  • cross frame layers

HTML object tag[1]

  • code: <object width="400" height="400" data="path/to/plain_text.txt"></object>

Javascript[edit]

<script language="JavaScript" type="text/javascript" src="path/to.js"></script>
<noscript><a href="URL">Description</a><noscript>


jQuery .load() or jQuery.ajax()

  • the code of "Click event" should written in the loaded file.

Server-side approach[edit]

Apache[edit]


CMS software or Wiki softwares[edit]

CMS softwares

Wiki softwares

Other softwares

PHP require / include function[edit]

PHP require_once(), include function ...

troubleshooting:

  • (When I browsed some_file.php which include )Warning: include_once(lib.php) [function.include-once]: failed to open stream: No such file or directory in ...common/view.php
common/lib.php
common/view.php  //the file included common/lib.php
some_file.php    //the file included common/view.php

further reading[edit]

References

  1. ↑ What are the differences between using an iframe and ajax to include the contents of an external page? - Stack Overflow
  2. ↑ events - Javascript callback when IFRAME is finished loading? - Stack Overflow
  3. ↑ jQuery.ajax() | jQuery API Documentation
Retrieved from "https://wiki.planetoid.info/index.php?title=Include_the_content_from_other_webpages&oldid=20523"