3

Firefox の Firebug または Chrome のインスペクターが提供する同じライブ変更機能を再現するために、サイトの視覚化 (.css または / および .js) を変更できる Web ページを作成しようとしています。

ここに私の仕事をよりよく説明するための画像があります:

ここに画像の説明を入力

iframe を使用してページ内の他のサイトを視覚化できましたが、残念ながら、 「同一オリジン ポリシー」により、視覚化を変更してその要素にアクセスすることはできません。

iframe を使用するか、外部サイトを別の要素内にロードする方法はありますか?

アップデート：

答えを考慮すると、オプションは次のようになります。

  • php プロキシ ページを作成してターゲット サイトを読み込み、そのサイトの視覚化を変更します。
  • ブラウザ拡張機能を作成します。

関数を呼び出す簡単なページで、Webサーバー（xampp）をインストールする必要がある場合でも、最初に試しましたfile_get_contents('http://www.site.com')。
ページは読み込まれますが、残念ながら一部の要素 (画像など) が見落とされており、静的なコピーにすぎません。
サイト ナビゲーションで先に進むことはできません。

更新 2:

コードをライブで変更できる場合は、javascript を介してページ全体をロードする方が良い解決策になる可能性があります (方法はわかりません) が、この「ページ コピー」と対話して対話を元のページに転送する可能性についてはどうでしょうか?

図式：

ここに画像の説明を入力

説明：

外部ドメイン ページをロードする iframe に属している場合でも、Firebug エクステンションが任意のページ要素を選択してライブ編集できることに気付きました。
私が探しているのは、Firebug のように振る舞い、要素を取得してそのスタイルを変更する方法です。
「視覚化スタイル」を選択するためにその上にツールバーを作成したかったので、サイトをiframeにロードしようとしています。たとえば、タイトルを大きくして赤くするボタン。
とにかく、私は他の方法の提案を受け入れます。

更新 3:

私の目的に非常に近い、FireFox と Chrome の両方の拡張機能を見つけました。"Stylish"
このアドオンを使用すると、サイトの css プロパティを変更して保存し、ページにアクセスするたびにそれらをリロードすることができます。

私の質問は次のとおりです。特定のサイトの視覚化を読み込んで変更するための専用ページを作成するにはどうすればよいですか?

最終編集:

より関連性の高い引数でこの質問を続けるために、新しい質問をすることにしました:
PHP プロキシ ページの作成

4

3 に答える 3

2

いいえ、あなたの解決策は

  • 自分のサイトをプロキシとして機能させて、同じオリジン ポリシーがトリガーされないようにする
  • ブラウザ依存 (Firefox または Chrome) で、承認とインストールが必要な拡張機能を構築する
于 2012-12-08T15:20:49.153 に答える
1

あなたが何を望んでいるかをよく理解しているかどうかはわかりませんが、これを簡単に「トリック」する私の感覚は、最初のサイト (iframe) に非常に具体的な高さと幅を与え、jQuery 条件を実行することでしょう。

    If ($('body').width() == 500 && $('body').height() == 400 {
      $('body').addClass('isiFrame');
    }

次に、 css .isiFrame .myCoolDivs {....} を実行するだけで済みます。準備が整ったドキュメントでも使用する必要があるかもしれませんが、サイズ変更でそれを行っていないため、それをだます方法の1つになる可能性があります（誰かが最初にこの正確な幅と高さで画面を持っている場合を除いて）

より安全な方法は、おそらく PHP を使用してマスター セッションを作成することですが、master_session または変数が true に等しい場合にボディ クラスを長時間エコーするため、例を示すことはできません。

それが役に立ったことを願っています！

于 2012-12-08T15:39:03.570 に答える
0

Same_origin_policyと戦おうとしても、それと戦おうとしても、あまり成功しないと確信しています。

サーバ側

これをサーバー側で処理し、Webページを取得して、必要なスタイリングとスクリプトを適用することをお勧めします。非常に簡単です!!

Ruby on Rails を使用している場合、Nokogiri gem を使用すると html を解析できます。また、標準ライブラリを使用して Web ページを「取得」できます。

クライアント側

クライアント側でこれを行う場合は、jquery/javascript コードを記述する必要があります。次の手順を実行できます。

  1. 表示したい Web ページを取得します。
  2. js/css ファイルを含む要素を取得し、それらと独自のファイルを削除します。
  3. ページに存在する新しい Iframe でページを表示します。
于 2012-12-08T18:43:38.673 に答える