如何在不使用 id 的情况下导航到页面的某个部分

Question

我知道我们可以通过在url

中使用id跳转到某个页面

http://example.com#myid 像这样

但我想跳转到其他站点的特定部分，该部分不包含任何 id

站点：http://www.naturals.in/ask-expert/

我想link到专家演讲部分

我试过 class，但显示 404

Answer 1

如果您可以在该页面上使用一些 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

Answer 2

如果您可以编辑第二个站点的源代码并添加一些 JavaScript，那么 Saeed 会给出很好的答案。

如果您无法编辑第二个站点的源代码，那么有两个答案：

1。你不能

无法访问外部页面上的元素。 Id 标签可能看起来是可访问的，因为您可以使用 public URL 滚动到它们，但这是浏览器实现。不能像这样访问其他元素。由于 non-id 元素不可访问，因此您无法告诉浏览器您要滚动到它们。你甚至不能告诉浏览器你想在外部页面上滚动固定距离，在 HTML 或 JavaScript.

中根本没有办法做到这一点

2。你可以，但 URL 会有所不同，无论如何你不应该这样做

澄清一下，如果标题没有说清楚，这是不安全的编码，将 confusing/scary 供您的用户使用。它也没有真正按照您的要求进行操作，但它有点模拟它。

如果您必须滚动到自己页面中没有 ID 的元素，您会怎么做？好吧，显然你会写一个 JavaScript 函数，在页面加载后运行，并识别有问题的元素并将页面滚动到它的位置。因此，要滚动到外部页面上的某个位置，我们需要在该页面加载后以某种方式运行一个函数。幸运的是，这不可能直接在外部页面上执行 - 想象一下，如果您可以通过操纵 link!

将任意代码注入任何网页，窃取登录凭据将是多么容易

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

但首先！现在几乎不可能在一个域上使用 JavaScript 从另一个域中抓取内容。这是因为同源策略，这是一种几乎所有浏览器都实现的安全功能，它禁止脚本访问来自不同域的数据。它旨在打击网络钓鱼攻击（我的意思是，我们是试图在添加我们自己的代码的同时克隆其他人的网站...）。幸运的是，绕过 same-origin 策略非常简单。如果需要，您可以编写自己的 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

运行s

代码(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>
}

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

您将此功能放在您自己的页面之一上。运行当您单击 link 时的功能，然后 boom shakalaka！页面内容将随着 http://www.naturals.in/ask-expert/ 处的页面更新，然后滚动到所需位置！巨大的成功。更新后的页面仍然可以正常运行，就好像它实际上已重定向到新的 URL，但是，URL 将是您的 URL。（在这种情况下，links 仍应指向原始站点）。这可能会吓跑不少提防网络钓鱼或异常行为的访问者，因此绝对不建议这样做。此方法应适用于任何网络浏览器。

代码：

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

您将函数编码为数据 URL，如下所示。数据 URL 在页面 URL 中嵌入了内容 - 图片、HTML、脚本。这样做的好处是显示页面的 URL 不再在您的 URL 下，因此任何提防网络钓鱼的人都不太可能将其与您的域相关联。许多人，如果他们在地址栏中看到一个意想不到的域，可能比他们看到一堆他们不理解的代码更担心。然而，正是因为这种是如此好的网络钓鱼攻击方法，大多数现代浏览器都会阻止 top-level 通过数据 URL 的导航。有关详细信息，请参阅 this post。这种方法也是绝对不推荐的。

数据url:

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

摘要？

差不多，你做不到。如果您不被不安全的代码注入所困扰并且不介意吓跑您的用户，您可以做类似的事情。

如何在不使用 id 的情况下导航到页面的某个部分

How to navigate to a section of a page without using id

html

navigation

anchor

hyperlink

1。你不能

2。你可以，但 URL 会有所不同，无论如何你不应该这样做

摘要？