可在2页上使用的小书签 [英] bookmarklet that works on 2 pages

问题描述

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

I'm using a bookmarklet to inject javascript into a webpage. I am trying to login into my gmail account(that part works) and in my gmail account automatically click Sent folder as the page loads. This is the starting page:

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

This is the code I am using in bookmarklet:

javascript:
document.getElementById('Email').value='[e-mail]';
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是已发送文件夹的类.此代码登录到我的帐户，但没有单击已发送文件夹".

J-Ke n0 aBU is the class of Sent folder. This code logins into my account, but it doesn't click Sent folder.

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

I noticed similar behavior on other websites; whenever a new page loads or refreshes, the bookmarklet stops working.
Why is that and what is the correct way of using the same bookmarklet on different page than it was originally clicked.

推荐答案

免责声明:我没有gmail，因此我没有专门针对gmail进行测试.
此答案用于解决您的评论:

Disclaimer: I don't have gmail, so I didn't test this for gmail specifically.
This answer exists to address your comment:

关于iframe呢?从理论上讲，是否可以在iframe中使用gmail登录，因此，当iframe更改为其他页面时，这对小书签没有影响?

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)保留在相同域上，它就可以根据跨域规范运行.
但是，有可能(取决于所使用的方法)无意地反作用"此行为(根据所使用的反作用，仍可以规避，等等).

Yes, it is technically possible to have a persistent bookmarklet using iframes (or, deity forbid, a frameset).
As long as your parent window (and it's containing iframe) remain on the same domain, it should work according to cross-domain spec.
It is however possible (depending on used method) to (un-)intentionally 'counter-act' this (which, depending on used counter-action, can still be circumvented, etc..).

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

Navigate to website, then execute bookmarklet which:

• 创建iframe.
• 将onload-handler设置为iframe.
• 用iframe替换当前网页内容(以窗口的完整宽度和高度).
• 将iframe的源设置为当前网址(在注入的iframe中重新加载当前打开的页面).

然后，iframe的onload-handler的工作是检测(使用url/title/page-content)加载了哪个页面以及应该执行哪些操作.

Then the iframe's onload-handler's job is to detect (using url/title/page-content) what page is loaded and which (if any) actions should be taken.

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

Example (minify (strip comments and unneeded whitespace) using 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等之类的东西结合使用.

Note: one of the obvious methods to minify further is to utilize bracket-access with string-variables for things like createElement, contentWindow, etc.

以下是有效载荷功能的示例功能体(从小书签上方)，将在 http:/上使用/www.w3schools.com (对不起，我不能很快想到另一个目标):

Here is an example function-body for the payload-function (from above bookmarklet) to be used on http://www.w3schools.com (sorry, I couldn't quickly think of another target):

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

上面的示例(在小书签内)已缩小:

above example (inside bookmarklet) minified:

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

希望这对您有所帮助(入门)！

Hope this helps (you get started)!

这篇关于可在2页上使用的小书签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！