Include the content from other webpages
Jump to navigation
Jump to search
Multiple approaches for including the content from other webpages or files
Usage[edit]
- seperate the navigation and content into two parts
- compare the content from two webpages
Comparison of iframe and ajax[edit]
- Load data[1]
- iframe: available
- ajax: available
- CSS rules were infected from original page called
- iframe: No
- ajax: Yes, Need to consider the CSS issue
- Callback actions called after loaded the content
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
- code: <object width="400" height="400" data="path/to/plain_text.txt"></object>
Javascript[edit]
- general (JavaScript Tip: Page Headers And Footers)
<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
- Decoupled CMS: Why “Going Headless” Is Becoming So Popular | Pantheon [Last visited: 2017-09-12]
Wiki softwares
- DokuWiki: DokuWiki export or use the plugin plugin:getraw
- Mediawiki:
- MediaWiki Template or transclude syntax(Mediawiki formatting rules)
- Include the content of wiki page from other software API:FAQ - MediaWiki ex: https://meta.wikimedia.org/w/index.php?title=Spam_blacklist&action=raw&sb_ver=1 [Last visited: 2016-02-16]
- Oddmuse wiki: Transclusion means to include a wiki page from elsewhere into your current page
Other softwares
- MovableType: template modules, or MultiBlog plugin
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
- solution:
- Using CONSTANT parameter (such as absolute file path in common configuration file) in the included path NOT using relative path
- Resolving PHP Relative Paths Problems - Ant's ATField
further reading[edit]
- Boutell.Com, Inc. (2007). How Do I Include One HTML File in Another? / Jennifer Kyrnin (n.d.). [3]
- How to include an html page into an html page
- 跨來源資源共用(CORS) | MDN
- php - how to bypass Access-Control-Allow-Origin? - Stack Overflow
References