gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 05:53:28 30 4
gpt4 key购买 nike

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

目标:我不想在选项卡或窗口中打开网页链接,而是想在主页上的网格中打开它们。我可能会使用类似 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;
});

最佳答案

首先,您不能将 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>中.

关于javascript - JQuery 加载/获取执行脚本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13356437/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com