jQuery/JavaScript:アクセスの内容は、iframe

StackOverflow https://stackoverflow.com/questions/364952

質問

たいと思い操る、HTML内のiframeを使用jQuery.

ながらよく集めたものだと思うことをこの設定により、jQueryの機能の文書は、iframeのようなもの:

$(function(){ //document ready
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
});

しかしこのはなさそうです。少し検査を示している変数 frames['nameOfMyIframe'] は undefined 場合を除いて本機が使用できなくなることが、iframeへの負荷時のものです。しかし、iframeの荷重の変数にアクセスできないか、または(私 permission denied型誤りのない）

なんだろうけど、日本人の仕事と周辺はないのか。

役に立ちましたか？

解決

私は何をやっていることは同一生成元ポリシーの対象だと思います。これは、のアクセス許可が拒否されましタイプのエラーを得ている理由である必要があります。

他のヒント

<iframe>が同じドメインからのものである場合、

、要素は

のように簡単にアクセスでき 
$("#iFrame").contents().find("#someDiv").removeClass("hidden");

の参照 の

$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});
iframe srcが別のドメインからのものであれば、

あなたはまだそれを行うことができます。あなたは、PHPの中に外部のページを読んで、自分のドメインからそれをエコーする必要があります。このように：

iframe_page.php 

<?php
    $URL = "http://external.com"

    $domain = file_get_contents($URL)

    echo $domain
?>
<時間>

次に、このような何かます：

display_page.html 

<html>
<head>
  <title>Test</title>
 </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>

$(document).ready(function(){   
    cleanit = setInterval ( "cleaning()", 500 );
});

function cleaning(){
    if($('#frametest').contents().find('.selector').html() == "somthing"){
        clearInterval(cleanit);
        $('#selector').contents().find('.Link').html('ideate tech');
    }
}

</script>

<body>
<iframe name="frametest" id="frametest" src="http://yourdomain.com/iframe_page.php" ></iframe>
</body>
</html>
<時間>

上記のアクセスが拒否せずにインラインフレームを介して外部のページを編集する方法の例です等...

私はこの方法クリーナーを見つけます：

var $iframe = $("#iframeID").contents();
$iframe.find('selector');

使用

iframe.contentWindow.document

の代わりに

iframe.contentDocument

あなたはIFRAMEがそれにアクセスする前に読み込みが完了したことを確認するように、IFRAMEのonloadハンドラにイベントを添付し、そしてそこでJSを実行する必要があります。 

$().ready(function () {
    $("#iframeID").ready(function () { //The function below executes once the iframe has finished loading
        $('some selector', frames['nameOfMyIframe'].document).doStuff();
    });
};

上記の「未ロード」の問題を解決しますが、アクセス権に関して異なるドメインからであるiframe内のページをロードする場合、あなたはそれのためにアクセスすることはできませんセキュリティ制限ます。

window.postMessage を使用して、ページとその iframe (クロスドメインかどうか) の間で関数を呼び出すことができます。

ドキュメンテーション

ページ.html

<!DOCTYPE html>
<html>
<head>
    <title>Page with an iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'page',
        variable:'This is the page.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    function iframeReady(iframe) {
        if(iframe.contentWindow.postMessage) {
            iframe.contentWindow.postMessage('Hello ' + Page.id, '*');
        }
    }
    </script>
</head>
<body>
    <h1>Page with an iframe</h1>
    <iframe src="iframe.html" onload="iframeReady(this);"></iframe>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <title>iframe</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
    var Page = {
        id:'iframe',
        variable:'The iframe.'
    };

    $(window).on('message', function(e) {
        var event = e.originalEvent;
        if(window.console) {
            console.log(event);
        }
        alert(event.origin + '\n' + event.data);
    });
    $(window).on('load', function() {
        if(window.parent.postMessage) {
            window.parent.postMessage('Hello ' + Page.id, '*');
        }
    });
    </script>
</head>
<body>
    <h1>iframe</h1>
    <p>It's the iframe.</p>
</body>
</html>

私はアクセスするための他のバリアントを使用することを好みます。 親からは、子iframe内の変数にアクセスすることができます。 $はあまりにも変数であり、あなたはそのわずかコールへのアクセスを受け取ることができます window.iframe_id.$

たとえば、window.view.$('div').hide() - idのiframe内のすべてのdivを隠す 'ビュー'

しかし、それはFFでは動作しません。優れた互換性のためにあなたが使用する必要があります。

$('#iframe_id')[0].contentWindow.$

あなたはjQueryの組み込みレディ機能を使用して完了するために、負荷を待って、古典を試してみました？

$(document).ready(function() {
    $('some selector', frames['nameOfMyIframe'].document).doStuff()
} );

K

を作りたいサンプルコードです。今、簡単に理解から異なるドメインにアクセスできな コンテンツのiframe..同じドメインまでのアクセスiframeコンテンツ

ェアしています私のコードを実行してくださいこのコード チェックします。私の印刷イメージsrcでです。がiframe、iframeから同じドメイン等からその他のドメイン（第三者）.できますimage src( https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

や

https://www.google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif ) でコンソールにも見える二つの許可のエラー 2 エラー:アクセス権は拒否されましたアクセスプロパティ'-ドキュメント'

...irstChild)},内容:機能(a){return mとなります。nodeName（"span")?a.contentDocument...

るから第三者のiframe. 

<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<p>iframe from same domain</p>
  <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe.html" name="imgbox" class="iView">

</iframe>
<p>iframe from same domain</p>
<iframe frameborder="0" scrolling="no" width="500" height="500"
   src="iframe2.html" name="imgbox" class="iView1">

</iframe>
<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif" name="imgbox" class="iView2">

</iframe>

<p>iframe from different  domain</p>
 <iframe frameborder="0" scrolling="no" width="500" height="500"
   src="http://d1rmo5dfr7fx8e.cloudfront.net/" name="imgbox" class="iView3">

</iframe>

<script type='text/javascript'>


$(document).ready(function(){
    setTimeout(function(){


        var src = $('.iView').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 2000);


    setTimeout(function(){


        var src = $('.iView1').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);


    setTimeout(function(){


        var src = $('.iView2').contents().find(".shrinkToFit").attr('src');
    console.log(src);
         }, 3000);

         setTimeout(function(){


        var src = $('.iView3').contents().find("img").attr('src');
    console.log(src);
         }, 3000);


    })


</script>
</body>

：その探している誰のために、それだけでこれですので、

私は、jqueryのなしのiframeのコンテンツを取得するために探して、ここで終わりました 

document.querySelector('iframe[name=iframename]').contentDocument

このソリューションは、iFrameのと同じように動作します。私は他のウェブサイトからすべての内容を取得することができますPHPスクリプトを作成している、そして最も重要な部分は、簡単にその外部コンテンツにカスタムのjQueryを適用することができます。他のウェブサイトからすべての内容を取得することができ、その後、あなたが同様にあなたのcusomのjQuery / JSを適用することができ、次のスクリプトを参照してください。このコンテンツは、任意の要素または任意のページ内で、どこでも使用することができます。

<div id='myframe'>

  <?php 
   /* 
    Use below function to display final HTML inside this div
   */

   //Display Frame
   echo displayFrame(); 
  ?>

</div>

<?php

/* 
  Function to display frame from another domain 
*/

function displayFrame()
{
  $webUrl = 'http://[external-web-domain.com]/';

  //Get HTML from the URL
  $content = file_get_contents($webUrl);

  //Add custom JS to returned HTML content
  $customJS = "
  <script>

      /* Here I am writing a sample jQuery to hide the navigation menu
         You can write your own jQuery for this content
      */
    //Hide Navigation bar
    jQuery(\".navbar.navbar-default\").hide();

  </script>";

  //Append Custom JS with HTML
  $html = $content . $customJS;

  //Return customized HTML
  return $html;
}

さらに堅牢性を示します。

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

と

...
var frame_win = getIframeWindow( frames['nameOfMyIframe'] );

if (frame_win) {
  $(frame_win.contentDocument || frame_win.document).find('some selector').doStuff();
  ...
}
...
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top