2 
#ontop {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 0;
    bottom: 90%;
    background-color: yellow;
}
#content {
    position: absolute;
    width: 100%;
    height: 90%;
    top: 10%;
    bottom: 0;
    border: 0;
}

上記の CSS を使用して、#contentDOM 要素内に外部 Web サイトをロードして、ユーザーがそれを閲覧できるようにすることは可能ですか? この#ontop要素は、現在ロードされている Web サイトにいくつかの追加機能を提案できます。

iframe通常、私が望むように動作します：

<div id="ontop">Always on top</div>
<iframe id="content" src="http://en.wikipedia.org/"></iframe>

iframeただし、一部の Web サイト (Stack Overflow など) は、セキュリティ上の理由から 内のコンテンツへのアクセスを避けています。

<div id="ontop">Always on top</div>
<iframe id="content" src="http://www.stackoverflow.com/"></iframe>

上記のスニペットは Web サイトのコンテンツをロードしませんが、次のエラーをスローします: X-Frame-Options によって表示が禁止されているため、ドキュメントの表示を拒否しました。

次に、AJAX で自分のニーズに合わせようとしました ( jQuery でクロスドメイン AJAX リクエストを許可するには、この modを参照してください):

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: 'http://www.stackoverflow.com/',
            type: 'GET',
            success: function(data) {
                $("#content").html(data.responseText);
            }
        });
    });
</script>
<div id="ontop">Always on top</div>
<div id="content"></div>

2 つの問題が発生するため、これはほとんど機能します。

  1. 複雑な Web サイト (Stack Overflow など) ではレンダリングが失敗します。
  2. URL (リンク、リクエストなど) が上記のスクリプトを実行しているサーバーに関連しているため、ユーザーはロードされた Web サイトを閲覧できません。

私はついに最初の2つのソリューションを組み合わせようとしました:

<script type="text/javascript">
    $(function() {
        $.ajax({
            url: 'http://www.stackoverflow.com/',
            type: 'GET',
            success: function(data) {
                $("#content").contents().find('body').append(data.responseText);
            }
        });
    });
</script>
<div id="ontop">Always on top</div>
<iframe id="content"></iframe>

これは少し良いです：

  1. レンダリングの失敗が少なくなります(たとえば、Google はまだ失敗していますが、スタック オーバーフローはもうありません)。
  2. URL はまだ間違っています。

どうすれば私の目標を達成できますか? これらの相対 URL を管理するソリューション、または私のニーズに合ったまったく別のソリューションのいずれかを歓迎します。

jsFiddle は、このような複雑な非同期リクエストに対して十分に強力ではないため、私が提供した 3 つの試みのソース コードを以下に示します。

4

1 に答える 1

4

Web 上でこれを行うのが難しい理由は、部分的には意図的に、人々が悪意を持って自分の Web サイトを別の Web サイトにロードするのを防ぐためであることが、すでにわかっているようです。

それを念頭に置いて、もし私があなたの立場なら、ブラウザー拡張機能 ( Chrome、Firefox ) 、またはおそらくブックマークレットのいずれかを作成することを調査します。これらはすべて、サイトの機能を維持しながら、同時に回避するページに JavaScript を挿入します。発生している権限の問題。

ブックマークレットの利点は、パワーと柔軟性を犠牲にして、最小限の作業量と最もクロス ブラウザー ソリューションであることです。ブラウザの一部のように機能し、適切なときにユーザーがブックマークレットをアクティブにする必要のない優れたインターフェイスが必要な場合は、拡張機能を検討してください。特に、ターゲット ユーザーが Chrome/FF ユーザーの場合はそうです。

どうしても IE ユーザーが必要な場合、IE 用の拡張機能を開発することは、確かに実行可能ではありますが、あまりユーザーフレンドリーではないことに注意してください。

また、開発に取り掛かる前に FF 拡張機能のプロトタイプを少し作成したい場合は、GreaseMonkeyを調べてください。これは基本的に、関連するパッケージングを気にせずに拡張コードの軽量バージョンを作成できる拡張機能です。

于 2013-02-26T20:32:04.580 に答える