Web サイトの UI を「ハイジャック」しようとしています。
目標: ウェブページのリンクをタブまたはウィンドウで開く代わりに、メイン ページのグリッドで開きたい。おそらくgridsterのようなものを使用します。基本的に、グリッド要素ごとに Web ページを配置します。
次のコードは、私がやろうとしていることを示しています。stackoverflow の場合、隅にある小さな「ボタン」で制御される非表示の div でメイン ページをラップします。リンクをクリックすると、同じウィンドウで開きます。「ホームページ」に戻るには、ボタンをもう一度クリックします。
効果はタブと非常に似ていますが、目標は、タブをより多くのタブを解放し、より適切に整理できるようにすることです。複数の「ボタン」を使用して、複数のリンクをすべて同じ「ページ」に配置できます。(これについて考える 1 つの方法は、非常に小さなボタンからタブにアクセスする一種のミニタブ機能です)。
実際には、ページごとに複数の要素を表示したいと考えています。次のコードは、1 つの質問のみを表示します。
いずれにせよ、本当の問題はレイアウトではなく、jquery.load がスクリプトを実行しないことです。これは、一部の Web ページが機能しないという大きな問題です。これらのスクリプトはドメインに挿入されるため、クロスドメインの問題はありません。問題は、スクリプトが実行されていないか、正しく実行されていないことです。過去 8 時間、さまざまな方法を試しましたが、うまくいきませんでした。
このコードの目的は、youtube (またはスタック交換) のようなものを使用して、リンクを 1 つのページに統合することです (必要な場合)。グリッド レイアウトの同じページに複数のビデオを (すべての追加情報を表示せずに) 配置することで、YouTube ビデオをブラウズする機能を考えてみてください。必ずしも一度に 10 本のビデオを見たいというわけではありませんが、10 個のタブを開くよりも効率的です。
これについて考える別の方法は、サイト間を切り替え続ける必要がある場合、同じ画面上のあるグリッド要素に 1 つのサイトを簡単にロードし、別のサイトを別のグリッド要素にロードすることができるということです。
Web サイトを簡単に「スクロール」するための非常に単純なナビゲーション タイプのインターフェイスを使用することもできます。多数の投稿があるスレッドがあるフォーラムを考えてみてください。長いリストを読む代わりに、投稿を移動するための左ボタンと右ボタンを使用して一度に 1 つずつ投稿を表示するインターフェイスを設計できます。(明らかに、これらのメソッドはサイトごとに特定のコーディングを必要としますが、コードの多くは重複します。次のコードは、ほぼすべてのサイト (少なくとも絶対セレクターを使用しないサイト) で使用でき、「ホームページ」に簡単にアクセスできます。ボタンをクリックするだけで）
少なくとも私にとっては、スクリプトを含むページで使用できない場合、その有用性は非常に限られています。なぜそれがうまくいかないのか、私には理解できません。サンドボックス化された 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;
});