javascript - JQuery 加载/获取执行脚本

Question

我正在尝试“劫持”网站的用户界面。

目标:我不想在选项卡或窗口中打开网页链接，而是想在主页上的网格中打开它们。我可能会使用类似 gridster 的东西。基本上我会为每个网格元素放置一个网页。

以下代码演示了我正在尝试做的事情。对于 stackoverflow，它将主页包裹在一个可隐藏的 div 中，该 div 由 Angular 落的一个小“按钮”控制。单击链接将在同一窗口中打开它。要返回“主页”，只需再次单击该按钮即可。

效果与选项卡非常相似，但目标是让选项卡保持更多的自由，同时允许更好的组织。一个人可以有多个“按钮”以允许多个链接都在同一个“页面”上。 (一种思考方式是一种迷你标签功能，您可以通过非常小的按钮访问标签)。

我实际上希望每页显示多个元素。以下代码只显示一个问题。

无论如何，真正的问题不是布局，而是 jquery.load 不执行脚本。这是一个主要问题，因为某些网页根本无法运行。没有跨域问题，因为这些脚本被注入(inject)到域中。问题是脚本未执行或未正确执行。在过去的 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; 
});

Answer 1

首先，您不能将 stackoverflow.com(以及几乎所有大型网站)放在 <iframe> 中.

所有主要网站都设计了防止被陷害，以确保他们的页面不会被用于欺诈目的。所以会有一些脚本来检测页面是否显示在框架中，如果是，它会做一些自杀工作，让页面消失。

其次，你不能使用$.load()将整个页面放在另一个 div 中。

尽管$.load()显式 eval() 的方法在每个 block 上可能会执行代码，但它可能会破坏事件处理程序和一些 $(selector)引用资料。

有些事件(如 onload)永远不会被触发，有些 $(selector)将是错误的(例如 $('#id') 将在稍后加载的元素与页面上已有的元素共享相同的 id 时失败。)

此外eval()使用与页面上运行的所有其他代码相同的代码上下文，它会同时相互冲突，因此它不能被视为任何方面的解决方案。

第三，你不能使用innerHTML作为 $.load() 的替代品，尽管 DOM 看起来正确

根据 script tag create with innerHTML of a div doesn't work , innerHTML不会执行脚本。我之前提供的可能解决方案结果证明是不够的。

所以最后的答案是，用脚本用普通的方法是不可能完成的。

一些想法:

1. 构建您自己的浏览器，它将断言 window.top === null即使在 <iframe>
2. 设法编写一个非常聪明的脚本，它将自动修改检索到的代码(html、js、css)使其与当前页面冲突，然后将页面嵌入到 <div> 中。 .
3. 管理一种方法来检测防止被陷害的代码，并将其删除。然后将处理后的代码放在一个空的<iframe>中.