javascript-可在2页上使用的书签

我正在使用小书签将javascript注入网页.我正在尝试登录我的gmail帐户(该部分有效),并且在我的gmail帐户中,页面加载时自动单击“已发送”文件夹.这是起始页：

这是我在bookmarklet中使用的代码：

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是“已发送”文件夹的类别.此代码登录到我的帐户,但没有单击“已发送文件夹”.

我在其他网站上注意到了类似的行为；每当加载或刷新新页面时,小书签都会停止工作.
为什么会这样？在与最初单击的页面不同的页面上使用相同的书签的正确方法是什么？

解决方法:

免责声明：我没有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的源设置为当前网址(在注入的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}}));

希望这会有所帮助(您可以开始使用)！

标签：bookmarklet,html,javascript
来源： https://codeday.me/bug/20191119/2036614.html