我正在尝试“劫持”网站的用户界面。
目标：我不想在选项卡或窗口中打开网页链接，而是想在主页的网格上打开它们。我可能会使用类似 gridster 的东西。基本上我会为每个网格元素放置一个网页。
以下代码演示了我正在尝试做的事情。对于stackoverflow，它将主页包装在一个可隐藏的div中，该div由角落中的一个小“按钮”控制。单击链接将在同一窗口中打开它。要返回“主页”，只需再次单击该按钮。
效果与标签非常相似，但目标是让标签保持更多标签自由，并允许更好的组织。一个可以有多个“按钮”以允许多个链接都在同一个“页面”上。（考虑它的一种方式是一种迷你标签功能，您可以通过非常小的按钮访问标签）。
我实际上希望每页显示多个元素。以下代码仅显示一个问题。
无论如何，真正的问题不是布局而是 jquery.load 不执行脚本。这是一个主要问题，因为某些网页根本无法工作。由于这些脚本被注入到域中，因此不存在跨域问题。问题是脚本要么没有执行，要么没有正确执行。在过去的 8 个小时里，我尝试了各种方法，但都没有奏效。
此代码的目标是采用 youtube（或堆栈交换）之类的东西并将链接合并到单个页面（如果需要）。想想通过在网格布局中的同一页面上拥有多个视频（没有可见的所有额外信息）来浏览 youtube 视频的能力。并不是说一个人一定想一次观看 10 个视频，但它比打开 10 个标签更有效。
另一种思考方式是，如果您必须在站点之间不断翻转，您可以轻松地将一个站点加载到一个网格元素中，并将另一个站点加载到同一屏幕上的另一个网格元素中。
人们甚至可以拥有一种非常简单的导航类型的界面来轻松“滚动”浏览网站。想想一个有很多帖子的论坛。不必阅读一长串列表，您可以设计一个界面，一次只显示一个帖子，并使用左右按钮在帖子中移动。（显然，这些方法需要对每个站点进行特定编码，但大部分代码会重叠。以下代码几乎可以在任何站点上使用（至少那些不使用绝对选择器的站点），并且可以轻松访问“主页”只需单击按钮）
如果它不能用于包含脚本的页面，那么至少对我而言，它的用处是极其有限的。我无法理解为什么它不起作用。沙盒 iframe 应该可以工作，但与 jquery.load/get 有相同的问题。在使用 getscript 加载 html 后，我尝试执行每个脚本，但无济于事。
// ==UserScript==
// @name Stackanator
// @namespace http://userscripts.org/
// @version 1.0
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
// @include http://stackoverflow.com/
// ==/UserScript==
var $ = unsafeWindow.jQuery;
// Wrap main div with a div and style it to be floating
$('body').wrap('<div id="CBP" />');
$('<div id="CBPA"></div>').insertBefore($('#CBP'));
$('#CBP').css({'position': 'absolute', 'top': '0px', 'left': '0px', 'width' : '100%', 'height' : '100%', 'z-index': '9999', 'background-color': 'white'});
// Create a small toggle box to show and hide the main div
$('#CBPA').attr('style', 'margin:0px;padding:0px;height:10px;width:10px;background-color:green;position:fixed;display:block;left:0px;right:0px;float:left;z-index:30000;');
// Setup toggle button
toggleCBPAs = false;
toggleCBPA = false;
$('#CBPA').click(function() {
if (toggleCBPAs == false) return;
if (toggleCBPA == true)
{
toggleCBPA = false;
$(this).css('background-color', 'red');
$('#CBP').css('visibility', 'visible');
} else
{
toggleCBPA = true;
$(this).css('background-color', 'green');
$('#CBP').css('visibility', 'hidden');
}
});
// Take over click's
$('body A').live('click', function() {
toggleCBPAs = true;
var url = $(this).attr("href");
name = url.split("/");
debugger;
//var p = $('<iframe id="CBF" src="'+$(this).attr("href")+'" sandbox="allow-forms allow-same-origin allow-scripts"></iframe>').insertAfter($('#CBP'));
$('<div id="CBG"></div>').insertAfter($('#CBP'));
$("#CBG").load(url);
toggleCBPA = true;
$(this).css('background-color', 'green');
$('#CBP').css('visibility', 'hidden');
return false;
});