[問題] 寫了Firefox腳本 但是onclick無法作用

作者: orange0319 (喵喵喵)   2019-03-24 23:37:04
就....
學了點皮毛JS
所以就想著寫腳本來解決使用上的一些問題
如果順利也可以分享出來給大家用
想說在某些特定網站上可以新增按鈕並提供轉址及功能
所以建了2個按鈕
myhelpbtn1 和 myhelpbtn2
希望一個按了觸動 toMobio()可以轉址
另一個按了後觸動 myDownload()
可以不跳轉頁面並取得跳轉後的頁面下載位置
並將網頁取得的名稱修改檔案名稱
但碰到幾個問題
1.
在瀏覽器上自己的頁面看兩個按鈕有創造出來
按了toMobio()後,轉的網址組合也如預期
但是上GreaseMonkey到目標網站測試
按鈕有創造出來 但是該網站上無法運行

ReferenceError: toMobio is not defined
請問這是因為onclick被傳說中的 内容安全策略CSP 擋了??還是?
2.
想說在GreaseMonkey無法作用
所以改用TamperMonkey
原碼照貼過去
結果....測試連按鈕都出不來 Q_Q
碼如下
但 myDownload() 還沒寫完...
這程式碼行為感覺不知道是不是我要的
所以想邊測試邊寫...就發現上面說的問題
style設定也佔很多行
但求完整我還是貼...如果傷眼我就砍掉
document.body.onload = addElement;
function addElement () {
let uwthumb = document.querySelector('.uwthumb');
var myhelpbtn1 = document.createElement('div');
myhelpbtn1.className = 'helpbtn1';
myhelpbtn1.style.border='solid';
myhelpbtn1.style.borderColor='#0000FF';
myhelpbtn1.style.display = 'flex';
myhelpbtn1.style.justifyContent = 'center';
myhelpbtn1.style.alignItems = 'center';
myhelpbtn1.style.cursor= 'pointer';
myhelpbtn1.style.width = '120px';
myhelpbtn1.style.height = '35px';
myhelpbtn1.style.margin.top = '4px';
myhelpbtn1.style.backgroundColor='lightblue';
myhelpbtn1.innerHTML = '<a onclick="toMobio();" >手機版網頁</a>';
uwthumb.appendChild(myhelpbtn1);
var myhelpbtn2 = document.createElement('div');
myhelpbtn2.className = 'helpbtn2';
myhelpbtn2.style.border='solid';
myhelpbtn2.style.borderColor='#0000FF';
myhelpbtn2.style.display = 'flex';
myhelpbtn2.style.justifyContent = 'center';
myhelpbtn2.style.alignItems = 'center';
myhelpbtn2.style.cursor= 'pointer';
myhelpbtn2.style.width = '120px';
myhelpbtn2.style.height = '35px';
myhelpbtn2.style.margin.top = '4px';
myhelpbtn2.style.backgroundColor='lightblue';
myhelpbtn2.innerHTML = '<a onclick="myDownload()" >直接下載</a>';
uwthumb.appendChild(myhelpbtn2);
}
const toMobio = ()=>{
str=location.pathname;
str=str.replace(/index/g, "slide");
window.location = "https://www.aaaaaaaa.org" +str;
}
const myDownload=()=>{
const mydlname= document.querySelector('.userwrap h2').innerText;
str=location.pathname;
str=str.replace(/photos/g, "download");
window.location = "https://www.aaaaaaaa.org" +str;
const dl_url= document.querySelector('.down_btn').href;
var iframe = document.createElement("iframe");
iframe.href = dl_url;
iframe.download =`${mydlname}.zip`;
iframe.click();
}
以及a了一下文章發現好像現在腳本很難運行
可是....
以前玩ogame / 車肥羊 / Gladiatus 之類遊戲
他們css和腳本都寫超好的
介面也超親切
雖然不會設想自己能一步登天像那些開發者一樣
但是沒想到我連這種初階程式碼都能撞牆 Q_Q
作者: dododavid006 (朔雪)   2019-03-24 23:54:00
油猴會把你的 script 包在一個 closure 裡執行吧若是這樣你就沒辦法直接用 onclick 的方式加事件處理的函式 兩種方式 一種是把你的函式用window.myDownload = myDownload 的方式匯到全域去一種是改用 addEventListener 來幫你的按鈕加上去
作者: tino1991 (深白)   2019-03-25 14:12:00
看到關鍵字XD 萬神殿不是有了嗎
作者: orange0319 (喵喵喵)   2019-03-25 20:21:00
感謝樓上大大們的回應 來試試看

Links booklink

Contact Us: admin [ a t ] ucptt.com