JavaScript 自動登入

javascript element html getelementbyid getelementsbytagname

初級貓咪 2022-03-08 10:07:26 ‧ 2641 瀏覽

分享至

練習使用JS自動登入網站

程式碼如下 :
var element = document.getElementB.yId('account');
element.value="account";

後續更換網站後發現沒辦法輸入帳號，一開始發現為ID會變動，
於是想說先getElementsByTagName 拿到ID值後再放入，
但其中一網頁沒辦法拿到ID的值。
爬了下文章後，使用檢視原始碼發現沒辦法看到該網頁全部的HTML碼 QQQQ
只有按F12內才能完整看到，

想請問各位大大這種的網站該如何抓取網頁的Element呢??
或是該如何做到自動輸入帳密

看更多先前的討論...收起先前的討論...

qpalzm iT邦研究生 5 級 ‧ 2022-03-08 10:59:26 檢舉

1.沒辦法輸入帳號:是在keyin的時候不能輸入嗎?
2.其中一網頁沒辦法拿到ID的值,請問是用甚麼發法取值,是網頁一開啟就取還是網頁跑完才讀取呢?
3.自動輸入帳密可以用cookie~

天黑 iT邦研究生 5 級 ‧ 2022-03-08 10:59:59 檢舉

自動輸入帳密這個不是瀏覽器有預設嗎? 前端幫忙自動登入這個感覺有點危險... 還是你需要的是SSO機制?

初級貓咪 iT邦新手 5 級 ‧ 2022-03-08 11:16:58 檢舉

@kekeke您好 :
1. getElementB.yId就沒有get到了所以沒辦法輸入
2. 使用getElementB.yId取得的，但我是包在一個chrome擴充，所以不知道該如何等到網頁跑完再讀取?
3. 有嘗試利用擴充把我cookie寫進去，但目前還沒仔細研究，如果原本方法不行就會往這個方向去研究QQ

@天黑您好 :
該網頁是有SSO機制也有串成功了，只是想自己練習看看使用chrome擴充是否能達到自動登入的效果XD

qpalzm iT邦研究生 5 級 ‧ 2022-03-08 11:57:17 檢舉

不知道你說擴充是什麼樣的做法XD (小弟不才)

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

river_huang

iT邦新手 3 級 ‧ 2022-03-08 12:31:22

最佳解答

爬了下文章後，使用檢視原始碼發現沒辦法看到該網頁全部的HTML碼 QQQQ
只有按F12內才能完整看到，

大大說的這個狀況
應該是畫面還沒render完成
因為抓取的目標還沒出現在畫面上
所以抓取不到
需要等待網頁載入完成才能執行抓取的操作
例如以下方法:

window.onload = function(){}

(如有錯誤還請指正)

附上參考其他大大的文章
https://ithelp.ithome.com.tw/articles/10197335

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

初級貓咪 iT邦新手 5 級 ‧ 2022-03-08 14:45:58 檢舉

@yellow_river您好~

有嘗試使用過

window.onload = init;
		function init(){
			alert("ok");
			//var element = document.getElementsByTagName("input")[0].id ;
			//alert(element);
			var element = document.getElementsByTagName("div")[0].id ;
			alert(element);
		}

以上程式碼在該網頁可抓到div[0] 但抓不到input[0]，div[1]也抓不到。

網頁檢視原始碼如下 :

<!DOCTYPE html>
<html xmlns:ng="" xmlns:tb="">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=2, width=device-width, height=device-height, viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
  <meta name="vizportal-config" data-buildId="2021_4_127_cuni7fuc93" data-staticAssetsUrlPrefix=""><link href="vendors-vizportal.css?a86dc391ac411415647e" rel="stylesheet"><link href="vizportal.css?a86dc391ac411415647e" rel="stylesheet"><script type="text/javascript" src="/javascripts/api/tableau-2.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="jquery.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="rsa.js?a86dc391ac411415647e"></script><script type="text/javascript" src="underscore-min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="q.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="canvas-to-blob.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="js.cookie.js?a86dc391ac411415647e"></script><script type="text/javascript" src="mousetrap.js?a86dc391ac411415647e"></script><script type="text/javascript" src="core.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="vendors-vizportal.js?a86dc391ac411415647e"></script><script type="text/javascript" src="vizportal.js?a86dc391ac411415647e"></script></head>
  <body class="tb-body">
    <div class="tb-app" id="app-root">
    </div>
  </body>
</html>

要抓的input是在body裡面QQQQQ

@yellow_river您好~

有嘗試使用過
```
window.onload = init;
		function init(){
			alert("ok");
			//var element = document.getElementsByTagName("input")[0].id ;
			//alert(element);
			var element = document.getElementsByTagName("div")[0].id ;
			alert(element);
		}
```

以上程式碼在該網頁可抓到div[0] 但抓不到input[0]，div[1]也抓不到。

網頁檢視原始碼如下 :

```
<!DOCTYPE html>
<html xmlns:ng="" xmlns:tb="">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=2, width=device-width, height=device-height, viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
  <meta name="vizportal-config" data-buildId="2021_4_127_cuni7fuc93" data-staticAssetsUrlPrefix=""><link href="vendors-vizportal.css?a86dc391ac411415647e" rel="stylesheet"><link href="vizportal.css?a86dc391ac411415647e" rel="stylesheet"><script type="text/javascript" src="/javascripts/api/tableau-2.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="jquery.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="rsa.js?a86dc391ac411415647e"></script><script type="text/javascript" src="underscore-min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="q.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="canvas-to-blob.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="js.cookie.js?a86dc391ac411415647e"></script><script type="text/javascript" src="mousetrap.js?a86dc391ac411415647e"></script><script type="text/javascript" src="core.min.js?a86dc391ac411415647e"></script><script type="text/javascript" src="vendors-vizportal.js?a86dc391ac411415647e"></script><script type="text/javascript" src="vizportal.js?a86dc391ac411415647e"></script></head>
  <body class="tb-body">
    <div class="tb-app" id="app-root">
    </div>
  </body>
</html>
```

要抓的input是在body裡面QQQQQ

修改

river_huang iT邦新手 3 級 ‧ 2022-03-08 16:30:55 檢舉

聽起來像是擴充跑完程式後
input才跑出來
如果搭配setTimeout
每隔一秒抓一次呢?
(以下沿用大大的function)

function init(){
  var element = document.getElementsByTagName("input") ;

  if(element[0]){ // 如果元素存在
    console.log(element[0].id) // 顯示元素ID
  } else { // 如果找不到
    setTimeout(init,1000) // 每隔一秒找一次
  }
}