如何在不使用 id 的情况下导航到页面的某个部分 [重复]答案

【问题标题】：How to navigate to a section of a page without using id [duplicate]如何在不使用 id 的情况下导航到页面的某个部分 [重复]
【发布时间】：2019-01-10 08:18:04
【问题描述】：

我知道我们可以通过url中的id跳转到页面的某个部分

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

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

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

我想链接到专家发言部分

我尝试过上课，但显示 404

【问题讨论】：

标签： html hyperlink navigation anchor

【解决方案1】：

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

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

1。你不能

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

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

只是为了澄清标题是否清楚，这是不安全的编码，会让您的用户感到困惑/害怕。它也没有真正做到你所要求的，但它有点模拟它。

如果您必须滚动到您自己页面中没有 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。（在这种情况下，链接仍应指向原始站点）。这可能会吓跑很多对网络钓鱼或异常行为保持警惕的访问者，因此绝对不建议这样做。此方法应适用于任何网络浏览器。

代码：

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

总结？

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

【讨论】：

【解决方案2】：

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

网址：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

【讨论】：