iT邦幫忙

0

請問append可以插入js碼嗎

我用js做顯示模板,再用append做流水分頁,
但是網頁會被清空,只剩模版顯示的資料,請問這有解嗎 @@a

<div class="moredata"></div>
<div class="more" onclick="More('inbox', 2);">MORE</div>

<script>
function inbox(msg)
{ document.write('<div class="showbox"><span class="ibox1">'+msg[0]+'<span class="ibox2">'+msg[1]+'</span></span></div>'); }

function More(url, page)
{
	$.ajax({
		url: url,
		type: "POST",
		data: "P="+page,
		success: function(msg)
		{ $(".moredata").append(msg); },
		error: function(){}
	});
}
</script>

後端回饋的資料

<script>inbox(["DATA1","DATE2"]);</script>
wingkawa iT邦新手 4 級 ‧ 2019-01-11 09:16:03 檢舉
不是append的問題,誰告訴你可以用document.write來「添加」新的DOM element了?
先好好看一下jquery的append是怎麼用的:http://api.jquery.com/append/
也看一下 document.write 在做些什麼: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
fillano iT邦超人 1 級 ‧ 2019-01-11 10:29:37 檢舉
參考: https://developer.mozilla.org/en-US/docs/Web/API/Document/write

最上方有一個Note:
as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open, which will clear the document.

如果不是明確知道document.write在做什麼事情,就別用他。
柯柯 iT邦新手 5 級 ‧ 2019-01-11 10:42:11 檢舉
你要回傳完資料後 執行inbox
那怎不寫
success: function(data){
inbox(data);
}
這樣不就好了....

inbox(msg){
$(".moredata).append('<div class="showbox"><span class="ibox1">'+msg[0]+'<span class="ibox2">'+msg[1]+'</span></span></div>');
}
0
Aka程式狗
iT邦新手 5 級 ‧ 2019-01-11 09:27:58
function inbox(msg) {
    retrun '<div class="showbox"><span class="ibox1">'+msg[0]+'<span class="ibox2">'+msg[1]+'</span></span></div>';
}
1
浩瀚星空
iT邦高手 1 級 ‧ 2019-01-11 09:29:30

怎麼覺得最近是否有人把javascript想的太方便了。

append只是幫你將html的文字給顯示出來。這就像是你把程式碼寫到記事本上的意思一樣。
它會不會跑程式碼??對記事本而言,它只是一段程式文字。不是程式。

所以,用append,就如同我上面說的記事本效應一樣。它可以幫你將那段script加入到你的html沒錯。但對你的html而言,它只是一個文字,一個元素。並無法將它當一個script的程式。
只會將它當一個script的自定元件寫入而已。

ps:我光這個月就碰上3個人問這樣的問題了。(不是在這邊)
也不知道是不是都是你。還是真的有三個人。

ufoer168 iT邦新手 5 級 ‧ 2019-01-11 09:57:15 檢舉

但是插入後確實是有執行...

如果可以執行的話。那請問你還有問題嗎??
真是見鬼了。

所以你不覺得是這個問題??是其它你想像不出來的問題嗎?

覺得這不是問題可執行。那我無話可說了。

2
淺水員
iT邦新手 4 級 ‧ 2019-01-11 18:10:28

以前我是有用原生 javascript 插入 script
( 搜尋 dynamic insert js )

至於 jQuery 剛剛測試這樣是可以跑的

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>測試</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input type="button" value="插入script到body" onclick='f1()'>
    <script type="text/javascript">
        function f1()
        {
            $('body').append('<scr'+'ipt>alert("123");</scr'+'ipt>');
        }
    </script>
</body>
</html>

PS. 上面把 script 拆開寫是發現瀏覽器會把字串內的 </script> 當作程式碼結尾 (如果是引用 js 檔的話就不用這樣搞)

不過除非特殊狀況,平常是不需要動態插入 javascript 的
以原發問的內容應該改成讓伺服器回傳 JSON
然後依據 JSON 回傳的內容帶入參數到 inbox 即可:

後端回饋的資料

{'param1':'DATA1','param2':'DATE2'}

然後前端

$.ajax({
    url: url,
    type: "POST",
    dataType:'json',
    data: "P="+page,
    success: function(msg){
        inbox(msg['param1'], msg['param2']);
    },
    error: function(){}
});
ufoer168 iT邦新手 5 級 ‧ 2019-01-11 19:58:18 檢舉

原本 More & inbox 就是一個函式,每頁都不一樣,但我想把相同部分(如More)當成通用函式,把顯示部分(如inbox)當成模版函式,讓不同網頁執行 More 時,去執行不同的模板就好,所以研究行不行~

ufoer168 iT邦新手 5 級 ‧ 2019-01-11 21:29:57 檢舉

原來把write換成append就解決覆蓋的問題了 > <|||

我要發表回答

立即登入回答