Include the content from other webpages

From LemonWiki共筆
Jump to navigation Jump to search

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