Include the content from other webpages

Multiple approaches for including the content from other webpages or files

Usage

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

Comparison of iframe and ajax

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

file included was locate on different server

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"

client-side approach

Frame or iframe

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

• 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

Apache

• Server side includes[2](SSI)

CMS software or Wiki softwares

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

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

• 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