1。你不能

无法访问外部页面上的元素。 Id标签似乎可以访问，因为您可以使用滚动到它们的公共URL，但这是浏览器的实现。不能像这样访问其他元素。由于非id元素不可访问，因此您无法告诉浏览器您要滚动到它们。您甚至无法告诉浏览器您要在外部页面上滚动固定的距离，而HTML或JavaScript根本无法做到这一点。

2。您可以，但网址会有所不同，无论如何您都不应该这样做

仅是澄清标题是否不清楚，这是不安全的编码，会对您的用户造成混淆/恐惧。它也并不能真正满足您的要求，但是可以模拟它。

如果必须滚动到自己页面中没有ID的元素，该怎么办？好吧，显然，您编写了一个JavaScript函数，该函数在页面加载后运行，并确定有问题的元素并将页面滚动到其位置。因此，要滚动到外部页面上的某个位置，我们不知何故需要在该页面加载后运行一个函数。幸运的是，这不可能直接在外部页面上执行-想象一下，如果您仅通过操纵链接就可以将任意代码注入任何网页，那么窃取登录凭据将是多么容易！

但是，我们可以获取外部页面的内容，对其进行操作以添加到我们的函数中，然后在您自己的URL或数据URL下显示编辑后的页面。无论哪种方式，被操纵的页面都无法显示在其原始URL下。您可能需要更新内部链接以指向原始站点。

但是首先！如今，几乎不可能在一个域上使用JavaScript来从另一个域中抓取内容。这是因为同源起源策略是几乎所有浏览器都实现的一项安全功能，它禁止脚本访问来自不同域的数据。它旨在对抗网络钓鱼攻击（我的意思是，我们试图在添加自己的代码的同时克隆别人的网站...）。幸运的是，绕过同源策略非常简单。您可以根据需要编写自己的PHP函数来执行此操作，也可以使用许多已经执行此操作的Web应用程序中的任何一个。 https://multiverso.me/AllOrigins/和其他软件一样好，它是免费的，因此在本示例中将使用它。

查看相关页面的源代码（http://www.naturals.in/ask-expert/），您要滚动到的位置为<h2>Expert Speak</h2>。我们将其编辑为<h2 id='expert-speak'>Expert Speak</h2>，然后添加一个函数，该函数在页面加载到页面后滚动到#expert-speak

代码（jQuery）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function redirect() {
    var url = 'http://www.naturals.in/ask-expert/';
    // the webpage you want to display
    var jsonUrl = 'http://allorigins.me/get?url=' + encodeURIComponent(url) + '&callback=?';
    // the url / php function that allows content to be scraped from different origins.

    $.getJSON( jsonUrl, function( data ) {
        var content = data.contents;
        // this is the scraped content

        content = content.replace("<script>","<script>window.addEventListener('load',function(){$('#expert-speak').get(0).scrollIntoView();},false);");
        // this adds in an event listener for when the page loads.
        // When it loads a function runs that scrolls #expert-speak into view
        content = content.replace("<h2>Expert Speak</h2>","<h2 id='expert-speak'>Expert Speak</h2>")
        // This adds the id #expert-speak to the relevant h2 tag

        document.open();
        document.write( content );
        // replace the content of the current page with your new content
        document.close();
    } );
    </script>
}

您可以通过两种方式运行此脚本。

您将此功能放在自己的页面上。单击链接后运行该功能，然后繁荣shakalaka！页面内容将随着页面http://www.naturals.in/ask-expert/的更新，然后滚动到所需位置！巨大的成功。更新后的页面仍然可以像实际重定向到新URL一样起作用，但是，该URL将是您的URL。（在这种情况下，链接仍应指向原始站点）。这可能会吓跑一些警惕网络钓鱼或异常行为的访客，因此绝对不建议这样做。此方法应可在任何Web浏览器上使用。

代码：

<button onclick='redirect()'>Click me</button>

您将函数编码为数据URL，如下所示。数据URL将内容（图像，HTML，脚本）嵌入页面的URL中。这样做的好处是，显示页面的URL不再位于您的URL下，因此，任何担心网络钓鱼的人都不太可能将其与您的域相关联。对于许多人来说，如果他们在地址栏中看到一个意外的域，可能比他们看到一堆看不懂的代码更加担心。但是，正是由于此这种网络钓鱼攻击的好方法，所以大多数现代浏览器都通过数据URL阻止了顶级导航。有关更多信息，请参见this post。绝对也不建议使用此方法。

数据网址：

<script>var dataurl = "data:text/html,<html><scri"+"pt src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></scri"+"pt><scri"+"pt>$.getJSON('http://allorigins.me/get?url='+encodeURIComponent('http://www.naturals.in/ask-expert/')+'&callback=?',function(data){document.open();document.write(data.contents.replace('<scri"+"pt>','<scri"+"pt>window.addEventListener(\'load\',function(){$(\'#expert-speak\').get(0).scrollIntoView();},false);').replace('<h2>Expert Speak</h2>','<h2 id=\'expert-speak\'>Expert Speak</h2>'));document.close();});</scri"+"pt></html>"</script>
<button onclick='window.location=dataurl'>Click me</button>

摘要？

几乎，你做不到。如果您不被不安全的代码注入所困扰，并且不介意将用户吓跑，那么您可以执行类似的操作。

Answer 2

如果您可以在该页面上使用某些Javascript，请使用以下代码：

url：http://example.com/over/there?className=ferret

// use this function for getting query strings
function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
}

var className = getParameterByName('className');
var element = document.getElementsByClassName(className);

element.scrollIntoView();

如果无法访问该页面的代码，那么您将无法对此做任何事情。

credits

如何在不使用ID的情况下导航到页面的一部分

2 个答案:

1。你不能

2。您可以，但网址会有所不同，无论如何您都不应该这样做

摘要？