javascript - 适用于 2 页的书签

Question

我正在使用小书签将 javascript 注入(inject)网页。我正在尝试登录到我的 gmail 帐户(该部分有效)，并在我的 gmail 帐户中自动点击 Sent 文件夹作为页面加载。这是起始页:

这是我在书签中使用的代码:

javascript:
document.getElementById('Email').value='myEmail@gmail.com';
document.getElementById('next').click();
setTimeout(function(){
document.getElementById('Passwd').value='myPassword';
document.getElementById('signIn').click();},1000);

setTimeout(function(){
document.getElementsByClassName("J-Ke n0 aBU")[0].click();
},6000);

J-Ke n0 aBU 是Sent文件夹的类。此代码登录到我的帐户，但它不会单击“已发送文件夹”。

我注意到其他网站上有类似的行为；每当加载或刷新新页面时，小书签就会停止工作。
为什么会这样，在不同页面上使用同一个小书签的正确方法是什么，而不是最初点击的。

Answer 1

免责声明:我没有 gmail，所以我没有针对 gmail 专门测试这个。
此答案存在于地址 your comment :

What about iframes. Is theoretically possible to use gmail login in an iframe and therefore when the iframe changes to another page this doesnt have effect on the bookmarklet?

是的，从技术上讲，使用 iframe(或者，上帝保佑，框架集)有一个永久书签是可能的。
只要您的父窗口(它包含 iframe)保持在同一域，它就应该根据跨域规范工作。
然而，有可能(取决于使用的方法)(非)有意地“反作用”这个(这取决于使用的反作用，仍然可以被规避，等等)。

导航到网站，然后执行书签:

• 创建 iframe。
• 将 onload-handler 设置为 iframe。
• 用 iframe 替换当前网页内容(到窗口的全宽和全高)。
• 将 iframe 的源设置为当前 url(在注入(inject)的 iframe 中重新加载当前打开的页面)。

然后 iframe 的 onload-handler 的工作是检测(使用 url/title/page-content)加载了什么页面以及应该采取哪些(如果有的话)操作。

示例(使用 Dean Edward's Packer v3 缩小(删除注释和不需要的空格)):

javascript:(function(P){
  var D=document
  ,   B=D.createElement('body')
  ,   F=D.createElement('iframe')
  ; //end vars
  F.onload=function(){
    var w=this.contentWindow     //frame window
    ,   d=w.document             //frame window document
    ; //end vars
    //BONUS: update address-bar and title. 
    //Use location.href instead of document.URL to include hash in FF, see https://stackoverflow.com/questions/1034621/get-current-url-in-web-browser
    history.replaceState({}, D.title=d.title, w.location.href ); 
    P(w, d);        //execute handler
  };
  D.body.parentNode.replaceChild(B, D.body);   //replace body with empty body
  B.parentNode.style.cssText= B.style.cssText= (
   F.style.cssText= 'width:100%;height:100%;margin:0;padding:0;border:0;'
  ) + 'overflow:hidden;' ;           //set styles for html, body and iframe
  //B.appendChild(F).src=D.URL; //doesn't work in FF if parent url === iframe url
  //B.appendChild(F).setAttribute('src', D.URL); //doesn't work in FF if parent url === iframe url
  B.appendChild(F).contentWindow.location.replace(D.URL); //works in FF
}(function(W, D){   //payload function. W=frame window, D=frame window document
  alert('loaded');
  // perform tests on D.title, W.location.href, page content, etc.
  //   and perform tasks accordingly
}));

注意:进一步缩小的明显方法之一是将括号访问与字符串变量一起用于 createElement、contentWindow 等。

这是要在 http://www.w3schools.com 上使用的有效载荷函数(来自上面的小书签)的示例函数体(抱歉，我不能很快想到另一个目标):

var tmp;
if(D.title==='W3Schools Online Web Tutorials'){
  //scroll colorpicker into view and click it after 1 sec
  tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;
  tmp.focus();
  tmp.scrollIntoView();
  W.setTimeout(function(){tmp.click()},1000);
  return;
}
if(D.title==='HTML Color Picker'){
  //type color in input and click update color button 'ok'
  tmp=D.getElementById('entercolorDIV');
  tmp.scrollIntoView();
  tmp.querySelector('input').value='yellow';
  tmp.querySelector('button').click();

  //click 5 colors with 3 sec interval
  tmp=D.getElementsByTagName('area');
  tmp[0].parentNode.parentNode.scrollIntoView();
  W.setTimeout(function(){tmp[120].click()},3000);
  W.setTimeout(function(){tmp[48].click()},6000);
  W.setTimeout(function(){tmp[92].click()},9000);
  W.setTimeout(function(){tmp[31].click()},12000);
  W.setTimeout(function(){tmp[126].click()},15000);
  return;
}

上面的例子(书签内)缩小了:

javascript:(function(P){var D=document,B=D.createElement('body'),F=D.createElement('iframe');F.onload=function(){var w=this.contentWindow,d=w.document;history.replaceState({},D.title=d.title,w.location.href);P(w,d)};D.body.parentNode.replaceChild(B,D.body);B.parentNode.style.cssText=B.style.cssText=(F.style.cssText='width:100%;height:100%;margin:0;padding:0;border:0;')+'overflow:hidden;';B.appendChild(F).contentWindow.location.replace(D.URL)}(function(W,D){var tmp;if(D.title==='W3Schools Online Web Tutorials'){tmp=D.getElementById('main').getElementsByTagName('img')[0].parentNode;tmp.focus();tmp.scrollIntoView();W.setTimeout(function(){tmp.click()},1000);return}if(D.title==='HTML Color Picker'){tmp=D.getElementById('entercolorDIV');tmp.scrollIntoView();tmp.querySelector('input').value='yellow';tmp.querySelector('button').click();tmp=D.getElementsByTagName('area');tmp[0].parentNode.parentNode.scrollIntoView();W.setTimeout(function(){tmp[120].click()},3000);W.setTimeout(function(){tmp[48].click()},6000);W.setTimeout(function(){tmp[92].click()},9000);W.setTimeout(function(){tmp[31].click()},12000);W.setTimeout(function(){tmp[126].click()},15000);return}}));

希望这对您有所帮助(您开始吧)!