javascript - 在现有网站上自动滚动

Question

所以我有一些代码可以让网页自动水平滚动，这在我创建网页时有效，但是当我尝试打开现有网页然后运行脚本时没有任何反应，有人可以解释我需要什么做，我只是希望能够打开脚本，然后打开网页并开始来回滚动，如果有帮助的话，它用于在 canban 板上显示不同的工作项目。

这是我目前所拥有的:

<script>
window.open("https://www.bbc.co.uk/news");


var scrollWanted = true;
var scrollbarPosition = 0;
var pageWidth = getWidth();

function scrollWin() 
{
	var scrollDirection = 'Right';
	var pageWidth = getWidth();
	scrollWanted = true;
	

	function f() 
	{
		if(scrollWanted)
		{
			if(scrollbarPosition == 0)
			{
				scrollDirection = 'Right'
			}
			
			if(scrollbarPosition == 100)
			{

				scrollDirection = 'Left';
			}
			
			if(scrollDirection == 'Right')
			{
				window.scrollTo(window.scrollX + 1, 0);				
				scrollbarPosition++;					
			}
			
			if(scrollDirection == 'Left')
			{
				window.scrollTo(window.scrollX - 1, 0);				
				scrollbarPosition--;					
			}
						
			setTimeout( f, 30 );
			
			
			//Refresh
			//if( scrollX == 50 )
			//{
			//	window.scrollTo(0,0);
			//	location.reload();
			//	
			//	setTimeout( f, 3000 );
			//	scrollWin();
			//}
		}
	}
	f();
	

  
}

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}
</script>

我知道 BBC 网站不会横向扩展，但我想不出有任何网站可以使用 atm。

谢谢! 凯尔。

Answer 1

据我了解你的问题，你想打开一些网站 example.com通过javascript，其内容可以水平滚动。

解决方案:

需要将新打开的窗口赋值给一个变量，这样打开后就可以对其进行操作了。

var newWindow = window.open('http://example.com');

对于操作，使用这个 newWindow变量为 window像这样的对象:

newWindow.scrollTo(newWindow.scrollX + 1, 0);

此外，您的 getWidth()函数需要像这样更改:

function getWidth(win) {
  return Math.max(
    win.document.body.scrollWidth,
    win.document.documentElement.scrollWidth,
    win.document.body.offsetWidth,
    win.document.documentElement.offsetWidth,
    win.document.documentElement.clientWidth
  );
}

如您所料，scrollWin()功能需要以相同的方式更改。

注1

如果您打开的窗口与运行 javascript 的域不同，window window.open() 返回的对象无法访问。

就是说，如果您的 javascript 加载到像 yoursite.com 这样的网站上，然后您打开另一个域，例如 var newWindow = window.open('http://example.com') ，您无法访问 newWindow.document对象，或该对象的任何属性 window对象，即你的 getWidth()功能将失败，scrollWin() 也会失败.

例如，在此页面的控制台中尝试以下代码:

var newWindow = window.open('http://google.com');
alert(newWindow.body.scrollWidth);

将引发以下错误:

Uncaught DOMException: Blocked a frame with origin "https://stackoverflow.com" from accessing a cross-origin frame.

注2

如果您在与您的网站相同的域中使用它，您需要考虑以下事项:

在 var newWindow = window.open('http://yoursite.com') 之后，如果您立即像newWindow.document.documentElement.offsetWidth那样访问它，您可能会得到不需要的结果，因为新窗口的内容可能仍在加载。

所以，一个 if(newWindow.document.readyState === 'complete')检查可能有助于之后运行滚动代码。

我已尽量表达清楚，如有任何疑问，请随时提出。