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

Question

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

Sre*_* KS 7 html navigation anchor hyperlink

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

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

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

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

我想链接到专家演讲部分

我尝试使用 class，但显示 404

Answer 1

jla*_*jla 6

如果您可以编辑第二个站点的源代码并添加一些 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>
}

Run Code Online (Sandbox Code Playgroud)

有两种方法可以运行此脚本。

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

代码：

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

Run Code Online (Sandbox Code Playgroud)

您可以将该函数编码为数据 URL，如下所示。数据 URL 将内容（图像、HTML、脚本）嵌入到页面的 URL 中。这样做的优点是显示页面的 URL 不再位于您的 URL 下，因此任何警惕网络钓鱼的人都不太可能将其与您的域关联起来。许多人如果在地址栏中看到意外的域，可能会比看到一堆他们不理解的代码更担心。然而，正是因为这是一种很好的网络钓鱼攻击方法，大多数现代浏览器都会通过数据 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>

Run Code Online (Sandbox Code Playgroud)

概括？

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

归档时间：	7 年，7 月前
查看次数：	7723 次
最近记录：	5 年，6 月前