javascript - react - জাভার ব্যবহার




jQuery/জাভাস্ক্রিপ্ট: একটি আইফ্রেমের বিষয়বস্তু অ্যাক্সেস (10)

আমি jQuery ব্যবহার করে একটি আইফ্রেম ভিতরে এইচটিএমএল ম্যানিপুলেট করতে চাই।

আমি ভাবলাম আমি jQuery ফাংশনের প্রসঙ্গ সেট করে আইফ্রেমের নথি হতে পারব, কিছু ভালো:

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

তবে এই কাজ বলে মনে হচ্ছে না। পরিদর্শনের একটি বিট আমাকে দেখায় যে frames['nameOfMyIframe'] variables frames['nameOfMyIframe'] পরিবর্তন undefined পর্যন্ত আইফ্রেমের লোডের জন্য কিছুক্ষণ অপেক্ষা undefined পর্যন্ত। যাইহোক, আইফ্রেম লোড হলে ভেরিয়েবলগুলি অ্যাক্সেসযোগ্য নয় (আমি permission denied টাইপ ত্রুটিগুলি)।

কেউ এই কাজ কাছাকাছি একটি জানেন?


Iframe src অন্য ডোমেন থেকে হয় তবে আপনি এখনও এটি করতে পারেন। আপনাকে বহিরাগত পৃষ্ঠাটি পিএইচপিতে পড়তে হবে এবং আপনার ডোমেন থেকে এটিকে ইকো করতে হবে। এটার মত:

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>

উপরে উল্লেখিত প্রবেশাধিকার ছাড়াই আইফ্রেমের মাধ্যমে বাহ্যিক পৃষ্ঠাটি কীভাবে সম্পাদনা করবেন তার উদাহরণ উপরে দেওয়া হল ...


আপনাকে আইফ্রেমের অনলোড হ্যান্ডলারে একটি ইভেন্ট সংযুক্ত করতে হবে এবং সেখানে জেসটি চালানো হবে, যাতে আপনি এটি অ্যাক্সেস করার আগে আইফ্রেম লোড করা শেষ করতে পারেন তা নিশ্চিত করুন।

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

উপরোক্ত 'এখনো-লোড হওয়া' সমস্যাটি সমাধান করবে না, তবে অনুমতিগুলির ক্ষেত্রে, যদি আপনি কোনও ডোমেনের আইফ্রেমে একটি পৃষ্ঠা লোড করছেন তবে সেটি সুরক্ষা সীমাবদ্ধতার কারণে আপনি অ্যাক্সেস করতে পারবেন না।


আপনি পৃষ্ঠা এবং তার আইফ্রেম (ক্রস ডোমেইন বা না) এর মধ্যে একটি ফাংশন কল করতে window.postMessage ব্যবহার করতে পারেন।

Documentation

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.iframe_id.$

উদাহরণস্বরূপ, window.view.$('div').hide() - আইডি 'ভিউ' সহ আইফ্রেমে সমস্ত window.view.$('div').hide()

কিন্তু, এটা FF কাজ করে না। ভাল সামঞ্জস্যের জন্য আপনি ব্যবহার করা উচিত

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


আমি একটি নমুনা কোড তৈরি। এখন আপনি সহজেই বিভিন্ন ডোমেন থেকে বুঝতে পারবেন যে আপনি আইফ্রেমের সামগ্রী অ্যাক্সেস করতে পারবেন না। একই ডোমেইন আমরা আইফ্রেম কন্টেন্ট অ্যাক্সেস করতে পারি

আমি আপনাকে আমার কোড শেয়ার করুন, এই কোড চালান কনসোল চেক করুন। আমি কনসোল ইমেজ 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 ) কনসোলে এবং দুটি অনুমতি ত্রুটি দেখতে পারে (২ ত্রুটি: সম্পত্তি অ্যাক্সেস অ্যাক্সেসের অনুমতি অস্বীকার করা হয়েছে) '

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

আমি এখানে jquery ছাড়া একটি আইফ্রেমের কন্টেন্ট পাওয়ার জন্য অনুসন্ধান শেষ, তাই অন্য যে কেউ এটি খুঁজছেন, এটি শুধু এই:

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

এই সমাধান iFrame হিসাবে কাজ করে। আমি একটি পিএইচপি স্ক্রিপ্ট তৈরি করেছি যা অন্য ওয়েবসাইট থেকে সমস্ত বিষয়বস্তু পেতে পারে এবং সবচেয়ে গুরুত্বপূর্ণ অংশটি আপনি সহজেই আপনার কাস্টম 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();
  ...
}
...

<iframe> একই ডোমেন থেকে থাকলে, উপাদানগুলি সহজেই অ্যাক্সেসযোগ্য

$("#iFrame").contents().find("#someDiv").removeClass("hidden");

Reference


$(document).ready(function(){
    $('#frameID').load(function(){
        $('#frameID').contents().find('body').html('Hey, i`ve changed content of <body>! Yay!!!');
    });
});





same-origin-policy