iT邦幫忙

0

開新網頁並顯示js的內容(改用div呈現) 已解決

如題 我想設計個顯示歌曲內容的js 構想大概是這樣的

js

function openwindow(url,name,iWidth,iHeight)
{
  var url;     //網頁位置;
  var name;    //網頁名稱;
  var iWidth;  //視窗的寬度;
  var iHeight; //視窗的高度;
  var iTop = (window.screen.availHeight-30-iHeight)/2;  //視窗的垂直位置;
  var iLeft = (window.screen.availWidth-10-iWidth)/2;   //視窗的水平位置;
  window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',status=no,location=no,status=no,menubar=no,toolbar=no,resizable=no,scrollbars=no');
}

function detail_call()
{
var deteal_html=""
//用於顯示內容的js(html code)
openwindow(deteal_html,'',800,400)
}

html

<a herf="#" onclick="detail_call()"></a>

可是我不曉得要怎樣在新視窗顯示js的內容
看樣子windows.open()似乎無法滿足我了 看其他網站好像都是用prototype的div來達到同樣效果 而且沒有網址列那些的 我想換成那樣的呈現方式

在查閱了各大網站的版面後終於製作出個讓我滿意的版面了
結合了jquery css3 html等 具備彈窗特效且可隨內容自動縮放

在不久之前已順利完成這功能了 成品大概長這樣

看更多先前的討論...收起先前的討論...
RenZhou iT邦新手 5 級 ‧ 2018-11-14 13:33:21 檢舉
首先先問一下歌詞資料是怎樣拉到頁面上的
用jquery去讀json
RenZhou iT邦新手 5 級 ‧ 2018-11-14 13:38:29 檢舉
比較單純的方法就是你把目標網址後面加parameters來傳值,到新頁面拿url後去拉你的歌詞出來
RenZhou iT邦新手 5 級 ‧ 2018-11-14 13:40:54 檢舉
可以參考這個 https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters
沒辦法單純的直接把內容寫到新視窗嗎 例如一個名叫abc的連結點了在新視窗顯示def(但這網頁原本沒有def是"寫"上去的)
RenZhou iT邦新手 5 級 ‧ 2018-11-14 13:49:13 檢舉
要跨頁面勢必少不了傳值的動作囉
淺水員 iT邦新手 5 級 ‧ 2018-11-14 13:49:55 檢舉
deteal_html 應該是另外一個頁面的 url 吧?
也就是說 js 是寫在另一個頁面裡面才對
RenZhou iT邦新手 5 級 ‧ 2018-11-14 13:50:28 檢舉
如果不分兩個檔案要直接產生頁面, 這樣這個應該符合你要的
https://stackoverflow.com/questions/2004555/how-can-i-make-javascript-make-produce-new-page
可是我要透過a網頁去call資料到deteal_html
RenZhou 就是這個 我要的就是這個! 再來就只要透過deteal_html取得參數在丟給openwindow就好了
直接透過get Parameter傳值要留意字數上限!
https://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request
淺水員 iT邦新手 5 級 ‧ 2018-11-14 14:08:17 檢舉
原來要傳值
推 get parameter
之前查差不多 2000 byte 以內都沒問題
傳不過去耶

function openwindow(url,name,iWidth,iHeight)
{
var url; //網頁位置;
var name; //網頁名稱;
var iWidth; //視窗的寬度;
var iHeight; //視窗的高度;
var iTop = (window.screen.availHeight-30-iHeight)/2; //視窗的垂直位置;
var iLeft = (window.screen.availWidth-10-iWidth)/2; //視窗的水平位置;
var opened = window.open(url,name,'height='+iHeight+',,innerHeight='+iHeight+',width='+iWidth+',innerWidth='+iWidth+',top='+iTop+',left='+iLeft+',status=no,location=no,status=no,menubar=no,toolbar=no,resizable=no,scrollbars=no');
opened.document.write(detail_html);
}

function detail_call()
{
var deteal_html="123";
//用於顯示內容的js(html code)
openwindow('','',800,400);
}

要怎樣把detail_html的內容傳過去
淺水員 iT邦新手 5 級 ‧ 2018-11-14 14:14:13 檢舉
另外我覺得用後端語言生成頁面也是不錯的方法
淺水員 iT邦新手 5 級 ‧ 2018-11-14 14:19:33 檢舉
var deteal_html="123";
var url='subWindow.html?'+deteal_html;
openwindow(url,'',800,400);
也就是說實際上需要做一個 subWindow.html 頁面
然後該頁面可以透過 get 的參數讀值
deteal_html沒這麼簡單哦 是像下面這樣的

而參數就是cactbfe detail_html則是這一大串出來的結果
大致上完成品長這樣

function detail_call(ca,ct,b,f,e)
{
var deteal_html="";
getJson(data/xxx.json,
function(b)
{
deteal_html+=ooo
}
openwindow('','',800,400);
opened.document.write(detail_html);
}

html

song_html+='<td><a href="javascript:void(0)" onclick="detail_call(\''+charA+'\',\''+charB+'\','+song_json[s].list_id+","+song_json[s].song_id+');return false;" title=>'+song_json[s].title+"</a></td>";
rockfire iT邦新手 5 級 ‧ 2018-11-14 14:34:31 檢舉
用 window.opener ?
A.html
function test ( cont)
{
return cont
}
window.open(b.html)
B.html

$(document).ready(function()
{
let cont= window.opener.test('i am b ') ;
alert(cont)
});
好了已經成功了 原來是我打錯了0.0 可是有網址列有點醜 有辦法隱藏嗎
有沒有辦法改用div呈現 看了另一個網頁的做法似乎是用prototype
淺水員 iT邦新手 5 級 ‧ 2018-11-14 15:58:26 檢舉
prototype 跟 div 關係不大
所有 object 都有 prototype

至於 div 呈現當然有辦法
只是畫面想如何呈現的問題了
現在大概做得差不多了 只差彈出的特效而已了

尚未有邦友回答

立即登入回答