作者laechan (挥泪斩马云)
看板Web_Design
标题Re: [心得] 游记文草稿.htm
时间Tue Dec 1 12:32:03 2020
将上次的东西做了修改後，实现了我以前想做的"网页模板"
展示网页
https://sites.google.com/view/myjapantravel
原始码很长就不贴了。
上面的网页分为 top 层，以及下方的 left、right 两个区块，使用
的基本 div 规划如下
<head>
<div style='position:fixed;top:0;height:100;font-size:40px'>
2014-2019<BR>日本自助旅行
</div>
</head>
<body bgcolor="#93FF93">
<div>
<div style='position:fixed;top:110;float:left;width:260px' valign=top
id=left_menu>
</div>
<div style='position:relative;top:110;left:270;float:left' id=show_zone>
</div>
</div>
head 区，position:fixed 时，固定在 top=0 的位置，整个 div 高度则设为 100。
body 区，第一个子 div float=left 即显示在最左边，第二个子 div float=left
代表显示在第二个左边区。(如果给 right，它会变成对半，我只是要它紧邻)
第一个子 div position 给 fixed 代表我要它不受卷轴滚动影响，固定显示在
left 的 top=110 位置，宽度 260px，也就是左侧选单的宽度。
第二个子 div position 给 relative，初始显示位置为 top=110、left=270 的
位置，也就是右侧内容的初始显示位置。
一般都会用 css 去 config 这些参数，我这是老派作风。
左侧选单的程式码如下:
function left_menu()
{
str="<a onclick='ext_or_not(this,\"table1\")'>＋自助行游记</a><BR>"+
"<table id=table1 style='display:none'>";
for(i=0;i<travels.length;i++)
str+="<tr><td> <a onclick='show_zone(\""+travels[i]+"\")'>"+
"<u><font color=blue>"+travels[i]+"</font></u></a></td></tr>";
str+="</table><p>";
.
.
document.getElementById("left_menu").innerHTML=str;
}
document.getElementById("left_menu").innerHTML=str 即是将产生的左侧
选单字串(str) 透过 innerHTML 方法显示在左侧。
点击每一个左侧选单的母项目(如自助行游记)时，它会呼叫 ext_or_not 函数
function ext_or_not(aa,tid)
{
v=aa.innerHTML;
if(v.indexOf("＋")!=-1)
v=v.replace(/＋/gi,"－");
else
v=v.replace(/－/gi,"＋");
aa.innerHTML=v;
if(document.getElementById(tid).style.display=="none")
document.getElementById(tid).style.display="block";
else
document.getElementById(tid).style.display="none";
}
把母项目前面的 ＋ 号变 － 号(再按一次则还原)，同时将以下原本设定
"display:none" 的子项目(即预设隐藏)，变更为 "display:block" 即更
改为显示(再按一次则又变回隐藏)。
点击每一个子项目时，它会呼叫 show_zone 函数，这个函数的内容大部份
与前篇的内容是类似的，也就是以这个内容为基础去扩张後，即得到我真正
想呈现的样貌:
function show_zone(pid)
{
// 一样去读 <pre> ... </pre> 内的内容
content=document.getElementById(pid).innerHTML;
// 然後对每一行做解析
tmps=content.split("\n");
for(i=0;i<tmps.length;i++)
{
tmp=tmps[i];
if(tmp=="") continue;
if(tmp.indexOf("http")!=-1)
{
s=tmp.indexOf("http");
e=s;
while(e++<tmp.length)
if(tmp.substr(e,1)==" ")
break;
if(e==s)
e=tmp.length-1;
url=tmp.substr(s,e-s);
tmp=tmp.substr(0,s)+"<a href='"+url+"' target=_blank>"+url+"</a>";
if(url.indexOf("imgur.com")!=-1 || url.substr(-4,1)==".")
{
if(url.substr(-4,1)!=".") url+=".jpg";
tmp+="<BR><a href='"+url+"' target=_blank>"+
"<img width="+MEDIA_WIDTH+" src='"+url+"'></a><BR>";
}
else if(url.indexOf("youtu")!=-1)
{
urls=url.split("watch?v=");
url=urls[0]+"embed/"+urls[1]+"?rel=0";
tmp+="<BR><iframe width="+MEDIA_WIDTH+" height="+
MEDIA_HEIGHT+" src='"+url+"' frameborder=0 allow='"+
"accelerometer; clipboard-write; encrypted-media; "+
"gyroscope; picture-in-picture' allowfullscreen></iframe><BR>";
}
tmps[i]=tmp;
}
else
tmps[i]=tmp.replace(/ /gi," "); // 把大部份行的空白以   替代
}
content="<font size="+FONT_SIZE+">"+tmps.join("<BR>")+"</font>";
document.getElementById("show_zone").innerHTML=content;
window.scrollTo(0, 0);
}
window.scrollTo(0, 0); 的意思就是，我希望使用者每点击一次子项目，
就自动回卷到最上面。早前我用 href 的做法，它在协作网页上会出现不
符预期的错误(不管是 a href 或 window.location.href 都一样)，但是
用 window.scrollTo(0, 0); 就不会。
如果没有使用 window.scrollTo(0, 0)，在观看某个文章到一半，点击其
它文章时，它不会从最上面开始。
这是 google 到的，我事前也不知道有这东西，而且我是先找到 jQuery
的做法，然後才推敲应该 JS 本身就有支援的语法。
那所以透过 document.getElementById("show_zone").innerHTML 显示出
右侧内容後，再用 window.scrollTo(0, 0) 就可以把卷轴回卷到最上面，
这样每点击一篇文章，就都会从最上面开始。
从上面可看出它的 frame 结构其实是透过 <div> 虚拟而成的，我很早就
想写这个，因为协作网页要以内嵌程式码的方式去弄 frame 我觉得挺困难
的，但是用虚拟的就没问题了，所有的资料(连同游记文)全都放在同一个
.htm 档内，并能依我自订的「网页模板」去显示我的网站内容。
而以下就可视为我自己简单架设的网站(它其实只是一个网页)
https://sites.google.com/view/myjapantravel
而且页面呈现大多可由我自订，如同其它部落客的网站一样。
目前它的缺点是还没有办法透过在网址後给定参数的方式，去显示特定的
文章，下午再来研究。
不过它不是我的重点，确定能以这个来虚拟 frame/网站分页 才是我的主
要目的。
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 114.33.66.104 (台湾)
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1606797127.A.DB0.html
※ 编辑: laechan (114.33.66.104 台湾), 12/01/2020 14:06:50
1F：→ laechan: url後面抓参数挺麻烦的..大概用其它变通的做法 12/02 10:48
2F：推 cocoasheep: 最大的问题应该是档案大小吧，光载入一页就36MB 01/10 18:45
3F：→ laechan: 其实这东西我选择用javascript写是有点想在自己本机跑的 01/14 08:03
4F：→ laechan: 用意，只是因为刚好也是htm档所以也能丢到协作平台 01/14 08:03
5F：→ laechan: 随身碟我是随身携带的,主要就是想要找游记资料时随时可叫 01/14 08:04
6F：→ laechan: 出来,它若不载入图片或图片有经打薄其实消耗流量不会很高 01/14 08:05
7F：推 cocoasheep: 原来如此 蛮方便的 01/16 20:53