مسج/جافا سكريبت:الوصول إلى محتويات iframe

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

سؤال

وأود أن التعامل مع HTML داخل iframe باستخدام مسج.

فكرت أن تكون قادرة على القيام بذلك عن طريق وضع إطار وظيفة مسج أن تكون وثيقة 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!!!');
    });
});

وإذا كان 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>

ما سبق هو مثال على كيفية تحرير صفحة خارجية من خلال إطار iframe دون نفى وصول الخ ...

وأجد بهذه الطريقة نظافة: 

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

استخدم 

iframe.contentWindow.document

وبدلا من 

iframe.contentDocument

وتحتاج إلى إرفاق الحدث لمعالج ONLOAD إطار iframe، ووتنفيذ شبيبة هناك، حتى يتسنى لك التأكد من إطار iframe قد انتهى التحميل قبل الوصول إليه. 

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

ما سبق لن تحل المشكلة "تحميل لا ولكن في ذات"، ولكن فيما يتعلق الأذونات، إذا كنت تقوم بتحميل صفحة في إطار iframe التي هي من مجال مختلف، فلن تكون قادرة على الوصول إليه نظرا ل القيود الأمنية.

يمكنك استخدام نافذة.postMessage إلى استدعاء دالة بين صفحة و له iframe (عبر النطاقات أو لا).

الوثائق

page.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>

وأنا أفضل أن استخدام البديل الآخر للوصول. من الوالدين يمكن أن يكون لديك الوصول إلى متغير في الإطار من الأطفال. $ هو متغير جدا، ويمكنك الحصول على الوصول إلى دعوتها عادلة window.iframe_id.$

وعلى سبيل المثال، window.view.$('div').hide() - إخفاء كل عناصر div في الإطار من مع 'الرأي' معرف

ولكن، لا يعمل في FF. لتحسين التوافق يجب عليك استخدام

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

هل حاولت الكلاسيكية، والانتظار لتحميل لاستكمال باستخدام وظيفة جاهزة مدمج مسج على ذلك؟ 

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

وK

وأنا إنشاء نموذج التعليمات البرمجية. الآن هل يمكن أن نفهم بسهولة من مجال مختلف لا يمكنك الوصول محتوى IFRAME .. نفس نطاق يمكننا الوصول إلى المحتوى IFRAME

وأنا أشارككم قانون بلدي، الرجاء تشغيل هذا الرمز تحقق وحدة التحكم. I طباعة صورة SRC في وحدة التحكم. هناك أربعة iframe أو اثنين IFRAME قادمة من نفس المجال واثنين آخرين من مجال آخر (طرف ثالث). يمكنك رؤية اثنين SRC صورة (<لأ href = "https://www.google.com/logos/doodles/2015/ غوغل الجديدة شعار-5078286822539264،3-hp2x.gif "يختلط =" نوفولو "> https://www.google.com/logos/doodles/2015/googles-new-logo-5078286822539264.3-hp2x.gif

و

HTTPS: // شبكة الاتصالات العالمية. google.com/logos/doodles/2015/arbor-day-2015-brazil-5154560611975168-hp2x.gif  )  في وحدة التحكم وأيضا يمكن أن نرى اثنين من الخطأ إذن ( 2 خطأ: تم رفض الإذن للوصول الملكية "وثيقة '

... irstChild)}، محتويات: وظيفة (أ) {عودة m.nodeName (أ، "الإطار من") a.contentDocument ...

و) الذي يأتي من الإطار من طرف ثالث. 

<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>

وانتهى بي الأمر هنا بحثا عن الحصول على محتوى ضمن إطار iframe دون مسج، وذلك لأي شخص آخر يبحث عن ذلك، انها مجرد هذا: 

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

وهذا الحل يعمل نفس الإطار من. لقد خلق النصي PHP التي يمكن أن تحصل جميع المحتويات من موقع آخر، والجزء الأكثر أهمية هو يمكنك بسهولة تطبيق عهدك مسج لهذا المحتوى الخارجي. يرجى الرجوع إلى البرنامج النصي التالية التي يمكن أن تحصل على كل المحتويات من موقع آخر ثم يمكنك تطبيق cusom الخاص مسج / 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