HTML page_javascript 팁에 공유 페이지를 포함하는 방법

하나의 HTML 파일을 다른 HTML 파일 안에 어떻게 포함합니까?
웹사이트에서 일관된 주제를 갖는 것은 매우 일반적인 관행입니다. 표준 탐색 모음이나 로고가 있을 수도 있고 저작권 및 관리 정보가 포함된 페이지 바닥글만 있을 수도 있습니다. 실제로 모든 페이지에 해당 정보를 저장하는 것보다 탐색 모음을 한 번 작성하고 하나의 파일에 보관한 다음 여러 다른 페이지에서 해당 파일을 참조할 수 있다면 확실히 좋을 것입니다. 한 곳에서 탐색 표시줄을 변경하면 모든 페이지가 즉시 업데이트됩니다.
파일을 "포함"하는 데 오신 것을 환영합니다. 이는 귀하의 웹사이트에서 이 작업과 그 이상을 수행할 수 있는 믿을 수 없을 정도로 강력한 기능입니다.
•
클라이언트와 서버라는 두 가지 범주로 분류됩니다. "클라이언트" 측 포함은 브라우저에서 수행되는 것입니다. 불행하게도 HTML에는 클라이언트측 포함을 위한 특정 구문이 없으므로 자바스크립트를 사용하여 작은 게임을 해야 합니다. "서버" 측 포함이 바로 그것입니다. 포함은 웹 서버에서 발생하므로 클라이언트 브라우저는 그것이 발생했는지조차 알 수 없습니다.
서버 측 포함
개념적으로 더 쉬운 것인 서버 측 포함부터 시작하겠습니다. 구체적인 구문은 보유하고 있는 서버 유형과 페이지가 작성된 내용에 따라 다릅니다.
가장 일반적인 웹 서버의 간단한 HTML 페이지는 SSI(서버 측 포함)라는 구문을 사용할 수 있습니다. 예를 들어 HTML 파일 a.html에 다음 행을 배치할 수 있습니다.

a.html을 보는 브라우저에 표시되는 페이지는 포함 행 앞의 a.html 내용으로 구성되며 그 뒤에는 b.inc의 내용으로, 포함 행 다음에 a.html의 내용이 옵니다. 탐색 표시줄의 HTML을 b.inc와 같은 파일에 넣으면 모든 페이지에 정확히 동일한 표시줄이 표시될 수 있습니다.
SSI는 Apache와 Microsoft IIS 웹 서버 모두에서 사용할 수 있습니다. Apache에서는 일부 구성이 필요할 수 있지만 실제 서버 구성 파일에 액세스할 수 없는 경우에도 일반적으로 서버의 웹 디렉터리에서 찾거나 생성할 수 있는 .htaccess라는 파일의 명령을 통해 활성화할 수도 있습니다. 여기에서 Apache SSI에 대해 자세히 알아보세요. IIS에서는 ".asp" 페이지를 사용할 때마다 SSI가 활성화됩니다. 따라서 페이지 이름을 .html 대신 .asp로 지정하면 됩니다. 여기에서 ASP 페이지의 서버측 포함에 대해 자세히 알아보세요.
또 다른 인기 있는 ASP 유사 프로그래밍 환경은 PHP입니다. PHP의 포함 구문은 매우 간단합니다.
readfile("b.inc"); ?>
당연히 PHP에는 다양한 추가 처리 기능이 있지만 ASP와 마찬가지로 위의 포함 작업을 수행하는 데 필요한 유일한 요구 사항은 웹 서버에 PHP를 설치하고 이름을 지정하는 것입니다. 파일 ".php".
위의 모든 접근 방식을 사용하면 페이지를 보는 브라우저는 포함에 대해 전혀 알지 못합니다. 모든 것은 페이지가 다운로드되기 전에 발생했습니다. 그러나 서버에서 포함을 처리하는 것이 올바른 옵션이 아닌 경우가 있습니다. 이것이 클라이언트에서 포함 처리가 이루어지는 곳입니다.
클라이언트 측 포함
위에서 언급했듯이 클라이언트 측 포함에 대한 실제 구문은 없지만 Javascript를 사용하여 이를 모방할 수 있습니다. 예를 들면 다음과 같습니다.


브라우저는 "b.js" 스크립트를 다운로드하여 실행하고 스크립트가 생성할 수 있는 모든 출력을 마치 인라인 HTML인 것처럼 인쇄합니다. 기술적으로 이는 포함이 아니지만 "b.js" 스크립트는 다음과 같은 일련의 자바스크립트 "인쇄" 문일 수 있습니다.

document.write("
") document.write( "
")
... 등
포함하려는 HTML이 "인쇄"되는 것을 볼 수 있습니다. 즉, 포함 파일을 일련의 자바스크립트 인쇄로 형식화할 수 있는 경우 클라이언트측 포함을 사용하여 삽입할 수 있습니다.
이제 상황이 매우 흥미로워질 수 있습니다. 원격 포함과 CGI 프로그램이라는 두 가지를 혼합에 도입할 것이기 때문입니다.
원격 포함
지금까지 포함된 파일은 다른 HTML 페이지와 동일한 위치에 있는 자체 서버에 있는 것으로 가정되었습니다. 거의 모든 경우에 인터넷의 다른 서버에 대한 전체 URL을 사용하여 "포함"할 수 있습니다.
클라이언트측 포함의 경우 매우 간단합니다. 그냥 작동합니다:

readfile("http://example.com/b.inc"); ?>이것은 b.js가 자체 서버가 아닌 example.com에서 로드된다는 점을 제외하면 이전 예제와 동일하게 작동합니다. 마찬가지로 PHP도 "작동합니다":


안타깝게도 Apache SSI 지시문은 원격 포함을 지원하지 않습니다. 그러나 거의 항상 방법이 있으며 CGI를 사용하는 해결 방법이 있습니다.
CGI 포함
지금까지는 "정적" HTML 페이지만 포함했습니다. 알고 보니 서버에서 실행되는 CGI 프로그램의 출력을 "포함"할 수 있습니다. 이는 Apache의 원격 포함 지원 부족에 대한 솔루션이 됩니다. 매우 짧은 Perl 프로그램부터 시작하겠습니다.
use LWP::Simple; "콘텐츠 유형:text/htmlnn" 인쇄; getprint($ENV{'QUERY_STRING'});
We'll call it "proxy.pl". Proxy.pl must be appropriately installed on your server into your cgi-bin directory or its equivalent. By being local to your server Include directives can reference it.
Proxy.pl simply fetches the contents of URL passed as a parameter. This means we can perform an apache remote include this way:

It works like this:
The include executes proxy.pl with the parameter "http://example.com/b.inc"
Proxy.pl then fetches b.inc from example.com and prints it.
The result is that the contents of b.inc show up as an included file.
Includes + remote includes + CGI
So far we've used a CGI program to fetch what is essentially just another static html file. In fact, if we put all these pieces together we can create some very useful and interesting internet applications.
Randy Cassingham of This is True wanted to be able to provide his readers who had web sites the ability to host one of his stories. Sounds like a job for an include file, right? But he also wanted that story to change every day. That's more than a static HTML page; that's a CGI program that outputs a different story each day.
The result is tad.pl (True-A-Day) - a Perl script that picks a new story every day and outputs HTML. Given what we've talked about so far so you can probably guess how it's used. As a client side include:

That's it in its simplest form. Note that:
tad.pl is written in Perl. It does whatever it needs to gather the HTML for the story to be output.
tad.pl outputs javascript. In fact, tad.pl's output is nothing more than a series of "document.write" statements.
The client browser executes the javascript. The result is that it prints the HTML that tad.pl constructed for today's story.
Using tad.pl in a server-side include looks like this:

Note that as discussed above we had to use a local CGI program, proxy.pl, to fetch the remote URL.
Note also that we've added an additional parameter, ssi=1. This causes tad.pl to output the HTML it gathers without the javascript document.write statements. The final sequence looks like this:
proxy.pl executes on your server, and is passed the URL "http://www.thisistrue.net/cgi-bin/tad.pl?ssi=1".
proxy.pl fetches that URL, causing tad.pl to execute on www.thisistrue.net.
tad.pl once again does whatever it needs to gather the HTML for the story to be output.
tad.pl outputs the HTML to be included.
That output is returned to proxy.pl, which in turn prints it, where it becomes the "included text".
The client browser sees nothing but HTML - the HTML from the containing page with the HTML from tad.pl inserted in place of the include statement.
As you can see, includes are not only a great organizational tool allowing you to collect common information into fewer files, but also a powerful way to add functionality to your web site and perhaps others. I'll end this with True-A-Day included via a client side include: