javascript - 网址跟踪功能

Question

我希望我的网页有两部分。顶部有一个文本框。当用户在文本框中键入URL时，底部将浏览该URL的内容。当用户单击底部部分中的链接时，底部部分将导航到新的URL，顶部的文本框将更改为新的URL。我该怎么做？
注意：此行为与Google Translate中的相同（例如here），但没有任何翻译。

Answer 1

第一个问题。。
同源问题
实现您所要求的功能的唯一方法就是使用google translate的方式，即使用服务器端支持的脚本作为代理请求：
http://translate.google.com/translate_un?depth=1&hl=en&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&tl=en&twu=1&u=http://de.wikipedia.org/wiki/USA&lang=de&usg=ALkJrhgoLkbUGvOPUCHoNZIkVcMQpXhxZg
上面是取自iframe的URL，Google translate使用它来显示已翻译的页面。需要注意的是，URL的域部分与父页面的URL相同——如果框架和父窗口不共享同一域，则父窗口的JavaScript将无法访问iframe中的任何内容。它将被浏览器的内置安全性阻止。
显然，如果在你的项目中你只会浏览你自己的页面（在同一个域上），那么上面的问题就不会是一个问题，但是考虑到你正在提供Google Translate作为一个例子，我不这么认为。
谷歌会怎么做？
上面的URL所做的是要求服务器端获取wikipedia页面并返回它，以便iframe可以显示它-但是对于iframe来说，这个页面似乎托管在http://translate.google.com而不是translate.google.com上。这意味着iframe与父窗口保持在同一原点内，并且意味着JavaScript可以用于编辑或修改iframe内的页面。
下一个问题。。。。
重写代理内容
基本上，我要说的是，仅仅使用HTML和客户端JavaScript是无法实现这一点的——您需要从服务器端获得一些帮助，例如PHP、Python、Ruby、Lisp、Node。。等等。这个脚本将负责确保页面的显示/显示正确。例如，您必须确保原始服务器上的内容/图像/ CSS的相关链接不会被破坏（您可以使用标记或物理重写相关链接）。也有许多网站会认为这是一个非法使用他们的网站，根据他们的网站的使用条款，所以应该从你的服务黑名单。
最后一个问题。。？
防止用户脱离代理
一旦你有了代理脚本，你就可以使用一个iframe（请避免使用旧的框架集）和一个JavaScript魔术，它可以重写iframe的所有链接、表单和按钮。这样，当单击或提交时，它们将发送到代理脚本，而不是原始目标。此重写代码还必须将原始目的地发送到代理脚本Google translate URL中的一些how-likewikipedia。一旦你整理好了，这将意味着你的iframe将重新加载新的目的地内容，但-最重要的是-你的iframe将留在同一个域。
问题太多了！
如果是我个人，我会重新考虑你的策略
总的来说，这不是一个简单的任务，也不是100%完全可靠的，因为有很多事情会导致问题：
某些网站是为了打破框架而设计的。
用户可以从不易重写的页面中导航，也就是说，任何由JavaScript支持的导航。
某些页面被设计为在从错误的主机上发送时断开。
做这种“代理”其他网站的网站在版权和使用方面可能会陷入困境。
谷歌之所以能做到这一点，是因为他们有很多时间、金钱和资源。。。哦，Google translate做的很多事情实际上是在服务器端处理的，而不是JavaScript。
建议
如果要查找在自己的网站中导航的跟踪用户：
使用谷歌分析。
或者使用cookies实现一个简单的服务器端跟踪系统。
如果您希望跟踪用户访问您的网站，然后访问万维网的其他部分：
放弃吧，网络技术就是为了防止这种事情发生。
或者加入一家网络营销公司，他们会尽最大努力避免类似的事情发生。