而 window.opener 的語法可以取得母網頁的變數加以控制
以下一個範例說明
此範例結合google feeds api ，功用大致是 取得google news 的 rss 點選文字可 在新網頁開啟；
在新視窗內使用母網頁的資料，可以操作上下篇新聞的切換
DEMO 圖 1 子母網頁
DEMO 圖 2 下一頁
+++++++++++++++++++++++++++++++++++++++
子網頁 News.html
+++++++++++++++++++++++++++++++++++++++
---------------------------------------------------------
script 部分
---------------------------------------------------------
var Information=window.opener.News;
//var idx=Information.Info.idx;
var idx=Information.num;
function load()
{
getInformation(idx);
}
function getInformation(Index){
document.getElementById("Title").innerHTML=Information.Info.title
[Index];
//check final content
var subNewsLength=Information.Info.content[Index].length-1; //
length of sub news
var lastWord=Information.Info.content[Index].charAt
(subNewsLength); //last word
//alert(lastWord)
if (lastWord != "!" && lastWord != "." && lastWord != "。" )
Information.Info.content[Index]+=("...");
document.getElementById("Content").innerHTML=Information.Info.content
[Index];
}
function NextNews(){
if (idx==Information.Info.title.length-1)
idx=0;
else
idx++;
getInformation(idx);
}
function PreNews(){
if (idx==0)
idx=Information.Info.title.length-1;
else
idx--;
getInformation(idx);
}
---------------------------------------------------------
body部分
---------------------------------------------------------
<body onload= "load()" >
<div id="Title" >Test </div>
<div id="Content" >load... </div>
<table id="ConTable" style="text-align: left; width: 90%; height:
30px;" border="0" cellpadding="2" cellspacing="2">
<tbody><tr>
<td style="width: 100px;">
<input id="before" value="Prev" onclick="PreNews()" type="button" /></
td>
<td style="width: 100px;">
<input id="Nxet" value="Nxet" onclick="NextNews()" type="button" /> </
td>
</tr>
</tbody>
</table>
</body>
+++++++++++++++++++++++++++++++++++++++
母網頁 index.html
+++++++++++++++++++++++++++++++++++++++
---------------------------------------------------------
script 部分
---------------------------------------------------------
google.load('feeds', '1'); //必須加入google account
var News =new Object();
News.num=0;
News.Info= function(){
News.Info.idx=0;
News.Info.title=[];
News.Info.content=[];
News.Info.img=[];
}
// different country have different news rss length
// 針對不同國家所提供RSS 新聞數量不同
// 舉例來說 大陸 136 筆 台灣 26 筆
// 所以要新設定，否則都會讀到大陸的新聞
// 以切換到台灣為例 只更新到前面的26筆 ,後面扔是大陸的新聞
News.ClearInfo = function(){
News.Info.idx=0;
News.Info.title=[];
News.Info.content=[];
News.Info.img=[];
}
News.SetIdxInfo=function(idx){
News.Info.idx=idx;
}
News.SetTitleInfo=function(idx,Title){
News.Info.title[idx]=Title;
}
News.SetContentInfo=function(idx,content){
News.Info.content[idx]=content;
}
News.SetImgInfo=function(idx,img){
News.Info.img[idx]=img;
}
News.GetIdxInfo=function(){ return
News.Info.idx; }
News.GetTitleInfoByIdx=function(idx){ return News.Info.title
[idx]; }
News.GetContentInfoByIdx=function(idx){ return News.Info.content
[idx]; }
News.GetImgInfoByIdx=function(idx){ return News.Info.img
[idx]; }
News.CallApi=function(){
News.url = 'http://news.google.com.tw/news?output=rss&ned=tw'
var feed = new google.feeds.Feed(News.url); // default in JSON
mode
//feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.setNumEntries(1000); //1000=20 因為最大數就是20筆 要更多要做其他設定
feed.load(News.parseNews);
}// end of News.CallApi
News.parseNews=function(res){
if (res.error) { return; }
News.ClearInfo();
for (var i=0; i<res.feed.entries.length; i++) {
// record title
var tempTitle = res.feed.entries[i].title.replace(/-.*/,
"");
News.SetTitleInfo(i,tempTitle);
var desc = res.feed.entries[i].content;
var src = desc.substring(desc.indexOf('img src="')+9);
var tempImg=src.substring(0, src.indexOf('" width='));
News.SetImgInfo(i,tempImg);
// replace 語法 / 中間是要replace的地方 /
// \. -> .
// \/ -> /
// <b>\.\.\.<\/b> = <b>...</b>
// .* -> 所有的
desc = desc.replace(/<b>\.\.\.<\/b>.*/, ''); // 把<b>...</
b>以後的字串取代為" "
desc = desc.replace(/\.<\/font>.*/, '');
desc = desc.replace(/.*>/, '');
News.SetContentInfo(i,desc);
}//end of for
News.Show();
}//end of News.parseNews
News.Show= function(){
document.getElementById("news").innerHTML= "<P class=
\"newsWords\">"+
"<a onClick=\"OpenNewsWindow(News,News.GetIdxInfo())\">"+
News.GetTitleInfoByIdx(News.GetIdxInfo())+"</a>"+"</p>";
} //end of News.show
News.Hide=function(){
document.getElementById("news").innerHTML="";
}
function OpenNewsWindow(News,i){
var Title= News.GetTitleInfoByIdx(i);
News.num=i;
subWindows=window.open
('News.html',Title,'width=400,height=200,location=no,toolbar=no,titlebar=no,state=no,modal=yes,screenY=200');
}
function Init(){
News.CallApi();
}
---------------------------------------------------------
body部分
---------------------------------------------------------
<body onload="Init()" onunload="GUnload()" >
<div id="news" name="news" >load... </div>
沒有留言:
張貼留言