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

javascript html prototype

jason311101 2018-11-14 12:50:33 ‧ 6281 瀏覽

分享至

如題我想設計個顯示歌曲內容的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邦新手 4 級 ‧ 2018-11-14 13:33:21 檢舉

首先先問一下歌詞資料是怎樣拉到頁面上的

jason311101 iT邦新手 4 級 ‧ 2018-11-14 13:35:37 檢舉

用jquery去讀json

RenZhou iT邦新手 4 級 ‧ 2018-11-14 13:38:29 檢舉

比較單純的方法就是你把目標網址後面加parameters來傳值，到新頁面拿url後去拉你的歌詞出來

RenZhou iT邦新手 4 級 ‧ 2018-11-14 13:40:54 檢舉

可以參考這個 https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters

jason311101 iT邦新手 4 級 ‧ 2018-11-14 13:45:11 檢舉

沒辦法單純的直接把內容寫到新視窗嗎例如一個名叫abc的連結點了在新視窗顯示def(但這網頁原本沒有def是"寫"上去的)

RenZhou iT邦新手 4 級 ‧ 2018-11-14 13:49:13 檢舉

要跨頁面勢必少不了傳值的動作囉

淺水員 iT邦大師 6 級 ‧ 2018-11-14 13:49:55 檢舉

deteal_html 應該是另外一個頁面的 url 吧？
也就是說 js 是寫在另一個頁面裡面才對

RenZhou iT邦新手 4 級 ‧ 2018-11-14 13:50:28 檢舉

如果不分兩個檔案要直接產生頁面, 這樣這個應該符合你要的
https://stackoverflow.com/questions/2004555/how-can-i-make-javascript-make-produce-new-page

jason311101 iT邦新手 4 級 ‧ 2018-11-14 13:51:07 檢舉

可是我要透過a網頁去call資料到deteal_html

jason311101 iT邦新手 4 級 ‧ 2018-11-14 13:55:23 檢舉

RenZhou 就是這個我要的就是這個! 再來就只要透過deteal_html取得參數在丟給openwindow就好了

Darwin Watterson iT邦好手 1 級 ‧ 2018-11-14 14:01:58 檢舉

直接透過get Parameter傳值要留意字數上限！
https://stackoverflow.com/questions/2659952/maximum-length-of-http-get-request

淺水員 iT邦大師 6 級 ‧ 2018-11-14 14:08:17 檢舉

原來要傳值
推 get parameter
之前查差不多 2000 byte 以內都沒問題

jason311101 iT邦新手 4 級 ‧ 2018-11-14 14:12:42 檢舉

傳不過去耶

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邦大師 6 級 ‧ 2018-11-14 14:14:13 檢舉

另外我覺得用後端語言生成頁面也是不錯的方法

淺水員 iT邦大師 6 級 ‧ 2018-11-14 14:19:33 檢舉

var deteal_html="123";
var url='subWindow.html?'+deteal_html;
openwindow(url,'',800,400);
也就是說實際上需要做一個 subWindow.html 頁面
然後該頁面可以透過 get 的參數讀值

jason311101 iT邦新手 4 級 ‧ 2018-11-14 14:22:12 檢舉

deteal_html沒這麼簡單哦是像下面這樣的

而參數就是cactbfe detail_html則是這一大串出來的結果

jason311101 iT邦新手 4 級 ‧ 2018-11-14 14:25:31 檢舉

大致上完成品長這樣

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)
});