সিএসএস কিভাবে ইফ্রেমে প্রয়োগ করবেন?

Question

আমার একটি সাধারণ পৃষ্ঠা রয়েছে যাতে কিছু আইফ্রেমে বিভাগ রয়েছে (আরএসএস লিঙ্কগুলি প্রদর্শন করতে)। আমি কীভাবে একই পৃষ্ঠাগুলি মূল পৃষ্ঠ থেকে ইফ্রেমে প্রদর্শিত পৃষ্ঠায় প্রয়োগ করতে পারি?

Comments

এটি সম্ভব তবে কেবল যদি iframe এর ডোমেন পিতামাতার মতো হয়

— gawpertron

গ্যাপারট্রন, কেবল পরিষ্কার করার জন্য, আপনি কি বলছেন যে আমি যদি অন্য কোনও ডোমেইন থেকে আইফ্রেম সামগ্রী ব্যবহার করি যা আমি নিয়ন্ত্রণ করি না, তবে আমার পক্ষে সেই বিষয়বস্তুর জন্য সিএসএস নিয়ন্ত্রণ করার কোনও উপায় নেই?

— ভিলি এম

আপনি কি পৃষ্ঠায় একটি লিঙ্ক তালিকাবদ্ধ করতে পারেন যাতে আমরা কেবল আমাদের পরিবর্তনগুলি দেখতে সক্ষম হয়েছি।

ডোমেন, পোর্ট এবং প্রোটোকল একই হতে হবে, সাবডোমেনগুলির সাথেও কাজ করে না।

— লী পেনকম্যান

Answer 1

সম্পাদনা করুন: যথাযথ CORS শিরোনাম সেট না করা হলে এটি ক্রস ডোমেনের কাজ করে না ।

এখানে দুটি আলাদা জিনিস রয়েছে: আইফ্রেমে ব্লকের স্টাইল এবং পৃষ্ঠার স্টাইলটি যদি ইফ্রেমে এম্বেড করা থাকে। আপনি সাধারণ পদ্ধতিতে iframe ব্লকের স্টাইলটি সেট করতে পারেন:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

আইফ্রেমে এম্বেড থাকা পৃষ্ঠার শৈলীটি অবশ্যই শিশু পৃষ্ঠায় অন্তর্ভুক্ত করে সেট করতে হবে:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

অথবা এটি জাভাস্ক্রিপ্টের মাধ্যমে প্যারেন্ট পৃষ্ঠা থেকে লোড করা যেতে পারে:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.head.appendChild(cssLink);

Comments

দয়া করে মনে রাখবেন, এটি পোস্ট করা কয়েকটি উদাহরণের মতো আমার কাছে এখন এইচটিএমএল 5 এর জন্য অবৈধ seems নিম্নরূপ আপনি ফ্রেম এর বিষয়বস্তু অ্যাক্সেস করতে পারে: document.getElementById("myframe").contentDocument। সিএসএস এম্বেড করা এখনও আমার পক্ষে কাজ করবে বলে মনে হচ্ছে না।

— রেহনো লিন্ডেক

লিঙ্কটি কেবলমাত্র

— শিরোনামে

আমি তখনই কাজ করেছিলাম ...document.head.appendChild(cssLink)- ফায়ারফক্স এবং সাফারি।

— মোজুবা

এটি কি ক্রস-ডোমেনের কাজ করে? আমি মনে করি না এটা হবে।

— সাইমন পূর্ব

ঠিক সুতরাং নং 1 টি এটির জন্য এটি পরীক্ষা করতে হবে: সঠিক, এটি ক্রস-ডোমেন কাজ করে না। অবিলম্বে ফ্রেম ['নাম'] করার পরে আপনি "ইউআরএল ব্লাহের সাথে ফ্রেম থেকে ইউআরএল ব্লাহের সাথে ফ্রেম অ্যাক্সেস করার জন্য অনিরাপদ জাভাস্ক্রিপ্টের প্রয়াস পান get ডোমেন, প্রোটোকল এবং পোর্টগুলি অবশ্যই মিলবে" "

— কেভিন

Answer 2

আমি গুগল ক্যালেন্ডারে এই সমস্যাটি পূরণ করেছি । আমি এটি একটি গাer় পটভূমিতে স্টাইল করতে এবং ফন্ট পরিবর্তন করতে চেয়েছিলাম।

ভাগ্যক্রমে, এম্বেড কোড থেকে URL টি সরাসরি অ্যাক্সেসে কোনও বাধা ছিল না, তাই পিএইচপি ফাংশন ব্যবহার file_get_contentsকরে পৃষ্ঠাটি থেকে সম্পূর্ণ সামগ্রী পাওয়া সম্ভব। গুগল ইউআরএল কল করার পরিবর্তে, আপনার সার্ভারে অবস্থিত একটি পিএইচপি ফাইল কল করা সম্ভব, প্রাক্তন। google.php, যাতে পরিবর্তনের সাথে মূল বিষয়বস্তু থাকবে:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

আপনার স্টাইলশিটে পথ যুক্ত করা:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(এটি আপনার স্টাইলশীটটি headশেষ ট্যাগের ঠিক আগে রাখবে ))

সিএসএস এবং জেএস কে তুলনামূলকভাবে বলা হয় সেই ক্ষেত্রে বেস ইউআরএলটি মূল ইউআরএল ফর্মটি নির্দিষ্ট করুন:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

চূড়ান্ত google.phpফাইলটি দেখতে এমন হওয়া উচিত:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

তারপরে আপনি iframeএম্বেড কোডটি এতে পরিবর্তন করুন :

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

শুভকামনা!

Comments

আপনি চাইলে সংজ্ঞা অনুসারে সেই হ্যাকিংটিকে কল করতে পারেন। তবে আপনি এর থেকে আরও ভাল সমাধানের কোনও প্রস্তাব দেননি ... এই সমাধানটি Google পরিষেবাকে ক্ষতিগ্রস্থ করার উপায় নয় বা লোককে তাদের দুর্বলতা কাজে লাগানোর পথে চালিত করার উপায় নয়।

— সিকোয়েন্সডিজিটেল.কম 16

এই সমাধানটি গুগল ডক্স দিয়ে কাজ করার জন্য আমি কোনওভাবেই হত্যা করব। এটি সমস্ত ধরণের জাভাস্ক্রিপ্ট ত্রুটি ছুঁড়ে ফেলেছে। "আনকাচড টাইপ এরির: সম্পত্তি অপরিবর্তিত 'এ' পড়তে পারে না"

— দেওয়াইডবি

কিছু মনে করবেন না, আমি এটা মূর্ত আউট, এখানে সমাধান পোস্ট stackoverflow.com/questions/25395279/...

— deweydb

@ ক্রিসহোটন এফওয়াইআই, এটি মূলত তা নয়। এটি অবশ্য পুরো আইফ্রেমকে অর্থহীন রেন্ডার করতে পারে (উদাহরণস্বরূপ, iframes ব্যবহারের এক কারণ সুরক্ষা উদ্দেশ্যে, যেমন কার্ডের অর্থ প্রদানের সাথে, এবং আপনি যদি এখানে প্রস্তাবিত প্রস্তাবটি করেন তবে সম্ভবত আপনি নিজের সমস্যার কারণ হবেন)।

— অ্যালিস্টায়ার

এটি করে আপনি সর্বদা একটি অন-লগ ইন ব্যবহারকারী হিসাবে ক্যালেন্ডারটি পাচ্ছেন। সাধারণ এইচটিএমএল এর সাথে যদি ব্যবহারকারীরা গুগলে লগইন করেন তবে তাদের নিজস্ব ক্যালেন্ডারটি দেখতে পাবেন, তবে যেহেতু আপনার পিএইচপি কোড ব্যবহারকারীদের গুগল সেশন আইডি জানতে পারে না এটি তাদের ব্যক্তিগত ক্যালেন্ডার আনতে পারে না।

— বিডিএসএল

Answer 3

যদি আইফ্রেমের সামগ্রী সম্পূর্ণরূপে আপনার নিয়ন্ত্রণে না থাকে বা আপনি বিভিন্ন পৃষ্ঠা থেকে বিভিন্ন শৈলীর সাহায্যে সামগ্রীটি অ্যাক্সেস করতে চান তবে আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এটিকে হেরফের করার চেষ্টা করতে পারেন।

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

দ্রষ্টব্য যে আপনি কোন ব্রাউজারটি ব্যবহার করছেন তার উপর নির্ভর করে কেবল একই ডোমেন থেকে প্রদত্ত পৃষ্ঠাগুলিতে কাজ করতে পারে।

Comments

লক্ষ করার মতো বিষয় যে পৃষ্ঠাটি অন্য কোনও ডোমেনে থাকলে একই উত্স নীতিটি এই কাজ করা বন্ধ করে দেবে।

— ConroyP

একই লাইনের চিন্তায় কিন্তু আরও সংক্ষিপ্ত: <iframe onload="this.contentDocument.body.style.overflow='hidden';" />

— রক্ষক এক

এমনকি ফায়ারফক্সও CORS গেছে

Answer 4

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

Comments

@deweydb আমি ক্রস ডোমেনের সাথে এটি বিশেষভাবে ব্যবহার করেছি used তবে আমি কেবল আপনার ক্ষমা চাইতে পারি!

— রামি সারেদিনে

@ আরমি এবং আপনি এটি একাধিক ব্রাউজারে পরীক্ষা করেছেন? বেশিরভাগ ব্রাউজারগুলি একটি সুরক্ষা ত্রুটি ছুড়ে ফেলছে।

— deweydb

আমি এই ধারণাটি আগে দেখেছি কিন্তু এটির দুর্দান্ত এবং পেশাদার ফাইল করার জন্য একটি লিঙ্ক যুক্ত করেছি ... + আপ

— জে.টুরাল

Answer 5

একটি আইফ্রেম সর্বজনীনভাবে বেশিরভাগ ব্রাউজারের দ্বারা পৃথক এইচটিএমএল পৃষ্ঠার মতো পরিচালনা করা হয়। আপনি যদি ইফ্রামের সামগ্রীতে একই স্টাইলশিটটি প্রয়োগ করতে চান তবে কেবল সেখানে ব্যবহৃত পৃষ্ঠাগুলি থেকে এটি উল্লেখ করুন।

Comments

@ শ্যাংরি কিন্তু ... কিভাবে?

— Child

Answer 6

<link>অতিরিক্ত স্টাইলশীট লোড না করে সরাসরি সিএসএস কোড প্রয়োগ করার পদ্ধতিটি এখানে।

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

এটি iframe পৃষ্ঠায় ব্যানারটি আড়াল করে। আপনার পরামর্শের জন্য ধন্যবাদ!

Comments

এর আইডি সহ একটি আইফ্রেম দরকার iframe?

— জেরেমি

শুধু প্রতিস্থাপন @jmalais #iframeসঙ্গে #<id>বা এমনকি iframeসব নির্বাচন করতে iframeগুলি

— Zeb McCorkle

এটি আমার পক্ষে কাজ করছে বলে মনে হয় না। আমি যে ইফ্রেমে সম্পাদনা করার চেষ্টা করছি তার ডম এর সরাসরি নীচে মাথা নেই। সুতরাং এর অর্থ কি এইচটিএমএল ডকুমেন্টের অভ্যন্তরে আমার মাথাটি অ্যাক্সেস করা দরকার বা এটি এমন কিছু যা jquery অনুসন্ধান ফাংশনটি নিজেই করতে সক্ষম হওয়া উচিত?

— ডেভিড এ ফ্রেঞ্চ

কনসোলটি পরীক্ষা করেছে এবং দেখে মনে হচ্ছে কোনও ডোমেন মিলের কারণে এটি iframe সামগ্রীগুলি অ্যাক্সেস করা থেকে অবরুদ্ধ করা হয়েছে। আমি ক্রোম ব্যবহার করছি এবং স্থানীয়ভাবে বর্তমানে আমার ডেভ পরিবেশটি হোস্ট করছি।

— ডেভিড এ ফ্রেঞ্চ

আনকচড ডোমেক্সেপশন: একটি ফ্রেমটিকে উত্স সহ অবরুদ্ধ করে দেয় যা আমাকে এই ত্রুটি দেয়

— patel

Answer 7

হ্যাঙ্গি যেমন বলেছে আপনি যদি পৃষ্ঠাটি আইফ্রেমে নিয়ন্ত্রণ করেন তবে সবচেয়ে সহজ পদ্ধিতি হ'ল সাধারণ শৈলীর সাথে ভাগ করা সিএসএস ফাইল তৈরি করা, তবে আপনার HTML পৃষ্ঠাগুলি থেকে কেবল এটির সাথে লিঙ্ক করুন।

অন্যথায় এটি অসম্ভাব্য যে আপনি যদি আপনার আইফ্রেমে কোনও বহিরাগত পৃষ্ঠা থেকে কোনও পৃষ্ঠার শৈলী পরিবর্তন করতে সক্ষম হন। এটি কারণ স্পুফিং এবং অন্যান্য হ্যাকগুলির সম্ভাব্য অপব্যবহারের কারণে ব্রাউজারগুলি ক্রস ফ্রেম ডোম স্ক্রিপ্টিংয়ের উপর সুরক্ষা কঠোর করেছে।

এই টিউটোরিয়ালটি আপনাকে সাধারণত স্ক্রিপ্টিং iframes সম্পর্কিত আরও তথ্য সরবরাহ করতে পারে। ক্রস ফ্রেম স্ক্রিপ্টিং সম্পর্কে আইই দৃষ্টিকোণ থেকে সুরক্ষা বিধিনিষেধ ব্যাখ্যা করে।

Answer 8

উপরের কিছুটা পরিবর্তন নিয়ে কাজ করে:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

কমপক্ষে ff3 এবং ie8 দিয়ে সূক্ষ্মভাবে কাজ করে

Comments

MyData কি এবং তা থেকে আসা যেখানে আছে

— Tigran

@ টিগ্রান এটির জন্যdynamic data

— আকাশ

Answer 9

আপনি যদি মূল পৃষ্ঠা থেকে সিএসএস এবং জাভাস্ক্রিপ্ট পুনরায় ব্যবহার করতে চান তবে আপনাকে <IFRAME>অ্যাজাক্স বোঝাই সামগ্রীর পরিবর্তে বিবেচনা করা উচিত । অনুসন্ধানের বটগুলি জাভাস্ক্রিপ্ট কার্যকর করতে সক্ষম হলে এটি এখন আরও এসইও বান্ধব।

এটি jQuery উদাহরণ যা আপনার নথিতে অন্য একটি html পৃষ্ঠা অন্তর্ভুক্ত করে। এটি তুলনায় অনেক বেশি এসইও বান্ধব iframe। বটগুলি অন্তর্ভুক্ত পৃষ্ঠাটিকে সূচিবদ্ধ করছে না তা নিশ্চিত করার জন্য এটি কেবল অস্বীকার করার জন্য এটি যুক্ত করুনrobots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

আপনি গুগল থেকে সরাসরি jQuery অন্তর্ভুক্ত করতে পারেন: http://code.google.com/apis/ajaxlibs/docamentation/ - এর অর্থ হল নতুন সংস্করণগুলির autoচ্ছিক স্বয়ংক্রিয়ভাবে অন্তর্ভুক্তি এবং কিছু গতি বৃদ্ধি means এছাড়াও, এর অর্থ হল যে আপনাকে কেবল jQuery সরবরাহ করার জন্য আপনাকে তাদের বিশ্বাস করতে হবে;)

Comments

একটি নোট করা উচিত যে পৃষ্ঠার বিষয়বস্তু কোনওভাবেই গতিশীল হলে এই সমাধানটি কাজ করে না।

— নিকডনক

Answer 10

নিম্নলিখিত আমার জন্য কাজ করে।

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

Comments

ত্রুটি:Uncaught TypeError: Cannot read property 'open' of undefined

— কিংআাইডার

Answer 11

ফ্রেমের সামগ্রী লোড করার ক্ষেত্রে যে কোনও বিলম্ব সহ্য করতে উপরের jQuery সমাধানটি প্রসারণ করা হচ্ছে।

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

Comments

এটির কাজ করার জন্য '$ এটি' একটি '$ (এটি)' হওয়া দরকার। এটি যখন ভালো লাগবে :)

— h.coates

Answer 12

আমার কমপ্যাক্ট সংস্করণ :

<script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

যাইহোক, কখনও কখনও iframeউইন্ডো লোড হওয়াতে প্রস্তুত হয় না, তাই টাইমার ব্যবহারের প্রয়োজন রয়েছে ।

ব্যবহারের জন্য প্রস্তুত কোড (টাইমার সহ):

<script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

... এবং jQuery লিঙ্ক:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>

Answer 13

অন্যান্য উত্তরগুলি এখানে jQuery এবং CSS লিঙ্কগুলি ব্যবহার করে বলে মনে হচ্ছে।

এই কোডটি ভ্যানিলা জাভাস্ক্রিপ্ট ব্যবহার করে। এটি একটি নতুন <style>উপাদান তৈরি করে । এটি সেই উপাদানটির পাঠ্য সামগ্রীটিকে নতুন CSS সহ স্ট্রিং হিসাবে সেট করে। এবং এটি সেই উপাদানটি সরাসরি আইফ্রেমে নথির মাথায় যুক্ত করে।

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

Answer 14

আপনি যখন "ডক.পপেন ()" বলছেন তার অর্থ আপনি যদি ইফ্রেমের অভ্যন্তরে যাই হোক না কেন এইচটিএমএল ট্যাগ লিখতে পারেন, সুতরাং আপনার এইচটিএমএল পৃষ্ঠার জন্য সমস্ত বুনিয়াদি ট্যাগগুলি লিখতে হবে এবং যদি আপনার আইফ্রেমে মাথায় একটি সিএসএস লিঙ্ক রাখতে চান তবে কেবল একটি লিখুন এটিতে সিএসএস লিঙ্ক সহ iframe আমি আপনাকে একটি উদাহরণ দিচ্ছি:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="https://stackoverflow.com/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

Answer 15

ব্যবহার এই চেষ্টা করতে পারেন:

$('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });

Comments

যদি আপনার আইফ্রেমটি বিভিন্ন উত্স থেকে আসে তবে সিওআরএস প্রক্রিয়াটি এই কাজের ভিত্তিতে অনুমতি দেবে না।

— মিঃ অ্যান্ডারসন

যদি iframe-url সমস্ত অবস্থানের জন্য CORS সক্ষম থাকে?

— adrhc

Answer 16

আপনি এইভাবে iframe এর বিষয়বস্তু স্টাইল করতে পারবেন না। আমার পরামর্শটি হ'ল সার্ভারসাইড স্ক্রিপ্টিং (পিএইচপি, এএসপি, বা পার্ল স্ক্রিপ্ট) ব্যবহার করা বা একটি অনলাইন পরিষেবা সন্ধান করা যা কোনও ফিডটিকে জাভাস্ক্রিপ্ট কোডে রূপান্তর করবে। এটি করার একমাত্র অন্য উপায় হ'ল যদি আপনি কোনও সার্ভারসাইড অন্তর্ভুক্ত করতে পারেন।

Comments

আপনি যখন বলছেন যে কিছু করা যায় না, তখন সাবধানতা অবলম্বন করুন যখন বাস্তবে এটি কেবলমাত্র কঠিন

— লাতান

Answer 17

যদি আপনার যদি iframe পৃষ্ঠায় অ্যাক্সেস থাকে এবং আপনি যদি নিজের পৃষ্ঠায় iframe এর মাধ্যমে লোড করেন কেবল তখনই এটিতে আলাদা আলাদা সিএসএস প্রয়োগ করতে চান তবে এখানে আমি এই ধরণের জিনিসগুলির জন্য একটি সমাধান পেয়েছি

এমনকি যদি iframe একটি অন্য ডোমেন লোড করে তবে এটি কাজ করে

সম্পর্কে চেক postMessage()

পরিকল্পনাটি হ'ল, মেসেজ হিসাবে ইফ্রেমে সিএসএস প্রেরণ করুন

iframenode.postMessage('h2{color:red;}','*');

* এটি ইম্রেমে কোনও ডোমেন কিনা তা বিবেচনা না করেই এই বার্তাটি প্রেরণ করা

এবং iframe এ বার্তাটি গ্রহণ করুন এবং সেই নথির শিরোনামে প্রাপ্ত বার্তা (সিএসএস) যুক্ত করুন।

কোড iframe পৃষ্ঠায় যুক্ত করতে

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

Answer 18

একই ডোমেনগুলির জন্য অনেক উত্তর লেখা আছে, আমি ক্রস ডোমেনগুলিতে কীভাবে এটি করব তা লিখব।

প্রথমত, আপনাকে পোস্ট বার্তা এপিআই জানতে হবে । দুটি উইন্ডোর মধ্যে যোগাযোগের জন্য আমাদের একটি ম্যাসেঞ্জার দরকার।

এখানে আমি তৈরি একটি মেসেঞ্জার।

/**
 * Creates a messenger between two windows
 *  which have two different domains
 */
class CrossMessenger {

    /**
     * 
     * @param {object} otherWindow - window object of the other
     * @param {string} targetDomain - domain of the other window
     * @param {object} eventHandlers - all the event names and handlers
     */
    constructor(otherWindow, targetDomain, eventHandlers = {}) {
        this.otherWindow = otherWindow;
        this.targetDomain = targetDomain;
        this.eventHandlers = eventHandlers;

        window.addEventListener("message", (e) => this.receive.call(this, e));
    }

    post(event, data) {

        try {
            // data obj should have event name
            var json = JSON.stringify({
                event,
                data
            });
            this.otherWindow.postMessage(json, this.targetDomain);

        } catch (e) {}
    }

    receive(e) {
        var json;
        try {
            json = JSON.parse(e.data ? e.data : "{}");
        } catch (e) {
            return;
        }
        var eventName = json.event,
            data = json.data;

        if (e.origin !== this.targetDomain)
            return;

        if (typeof this.eventHandlers[eventName] === "function") 
            this.eventHandlers[eventName](data);
    }

}

যোগাযোগের জন্য দুটি উইন্ডোতে এটি ব্যবহার করা আপনার সমস্যার সমাধান করতে পারে।

প্রধান উইন্ডোতে,

var msger = new CrossMessenger(iframe.contentWindow, "https://iframe.s.domain");

var cssContent = Array.prototype.map.call(yourCSSElement.sheet.cssRules, css_text).join('\n');
msger.post("cssContent", {
   css: cssContent
})

তারপরে, ইভেন্টটি iframe থেকে গ্রহণ করুন।

ইফ্রামে:

var msger = new CrossMessenger(window.parent, "https://parent.window.domain", {
    cssContent: (data) => {
        var cssElem = document.createElement("style");
        cssElem.innerHTML = data.css;
        document.head.appendChild(cssElem);
    }
})

আরও তথ্যের জন্য সম্পূর্ণ জাভাস্ক্রিপ্ট এবং ইফ্রেমস টিউটোরিয়াল দেখুন।

Answer 19

শৈলীটি মূল এইচটিএমএলটিতে রাখার জন্য আমি আরও একটি সমাধান পেয়েছি

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

এবং তারপরে ইফ্রামে এটি করুন (জেএস লোড দেখুন)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

এবং জেএসে

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

এটি সেরা সমাধান নাও হতে পারে এবং এটি অবশ্যই উন্নত হতে পারে তবে আপনি যদি প্যারেন্ট উইন্ডোতে "স্টাইল" ট্যাগ রাখতে চান তবে এটি অন্য বিকল্প

Answer 20

এখানে, ডোমেনের ভিতরে দুটি জিনিস রয়েছে

1. আইফ্রেম বিভাগ
2. পৃষ্ঠাটি আইফ্রেমের অভ্যন্তরে লোড হয়েছে

সুতরাং আপনি নিম্নলিখিত দুটি বিভাগটি স্টাইল করতে চান,

1. আইফ্রেম বিভাগের জন্য স্টাইল

এটি সম্মানজনক idবা classনামের সাথে সিএসএস ব্যবহার করে স্টাইল করতে পারে । আপনি আপনার পিতামাতার স্টাইল শিটগুলিতেও এটি স্টাইল করতে পারেন।

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2. আইফ্রেমের ভিতরে পৃষ্ঠাটি স্টাইল করুন

এই স্টাইলগুলি জাভাস্ক্রিপ্টের সাহায্যে প্যারেন্ট পৃষ্ঠা থেকে লোড করা যায়

var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.href = "iFramePage.css"; 

তারপরে সেই সিএসএস ফাইলটিকে সম্মানিত আইফ্রেম বিভাগে সেট করুন

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

---

এখানে, আপনি এইভাবে ব্যবহার করে আইফ্রেমের অভ্যন্তরে পৃষ্ঠার প্রধান অংশটি সম্পাদনা করতে পারেন

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead.append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath, 
      type: "text/css" }
     ));

Answer 21

আমরা iframe এ শৈলী ট্যাগ সন্নিবেশ করতে পারেন। এখানেও পোস্ট ...

<style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>

Comments

এটি কাজ করে না। স্টাইল ট্যাগটি সঠিকভাবে সন্নিবেশ করানো দেখে মনে হচ্ছে তবে এর ভিতরে কোনও সামগ্রী নেই এবং কোনও আইডি নেই।

— darylknight

Answer 22

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);

Comments

আমি এই উত্তরটি অনেকবার যাচাই করেছি richTextFieldএখানে কী আছে?

— কিরণকুমার দাফদা

এটি ইফ্রামের নাম

— জিভা

আমি চেষ্টা করিনি, তবে আমার ধারণা এটি স্যান্ডবক্সের বিপক্ষে হবে না

— Jeeva

Answer 23

আমি মনে করি সবচেয়ে সহজ উপায় হ'ল iframe হিসাবে একই জায়গায়, অন্য ডিভ যুক্ত করা

তার করা z-index, আইফ্রেম ধারক চেয়ে বড় তাই আপনি easly শুধু স্টাইল করতে পারেন আপনার নিজের DIV আছে। আপনার যদি এটিতে ক্লিক করতে হয়, কেবল pointer-events:noneনিজের ডিভিতে ব্যবহার করুন, সুতরাং যদি আপনার উপর ক্লিক করার দরকার হয় তবে iframe কাজ করবে;)

আমি আশা করি এটি কাউকে সাহায্য করবে;)

Answer 24

একটি দুর্দান্ত স্ক্রিপ্ট রয়েছে যা নোডের পরিবর্তে নিজের একটি আইফ্রেম সংস্করণ রাখে। কোডপেন ডেমো

ব্যবহারের উদাহরণ:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

Comments

আপনি এটি কেন করতে চান?!

— ডিলান ওয়াটসন

Answer 25

বিকল্প হিসাবে, আপনি সিএসএস-ইন-জেএস প্রযুক্তি ব্যবহার করতে পারেন, নীচের লাইবের মতো:

https://github.com/cssobj/cssobj

এটি জেএস অবজেক্টটিকে গতিশীলভাবে আইফ্রেমে সিএসএস হিসাবে ইনজেক্ট করতে পারে

Answer 26

এটি কেবল একটি ধারণা, তবে সুরক্ষা চেক এবং ফিল্টারিং ছাড়াই এটি বাস্তবায়ন করবেন না! অন্যথায় স্ক্রিপ্ট আপনার সাইট হ্যাক করতে পারে!

উত্তর: আপনি যদি টার্গেট সাইটটি নিয়ন্ত্রণ করেন তবে আপনি রিসিভার স্ক্রিপ্টটি সেটআপ করতে পারেন:

1) styleপরামিতি সহ iframe লিঙ্কটি সেট করুন :

http://your_site.com/target.php?color=red

(শেষ বাক্যাংশটি ফাংশন a{color:red} দ্বারা এনকোড করা হয়েছে urlencode।

2) রিসিভার পৃষ্ঠাটি এটির target.phpমতো সেট করুন :

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

Comments

সতর্কতা: এটি সর্বোত্তমভাবে ইনজেকশন।

— কানো

হ্যাঁ, আপনি নিজের সার্ভারে পেন-টেস্টের বট এবং স্ক্রিপ্টের

— কিডিস্

সুরক্ষার অতিরিক্ত সতর্কতা সহ আমি এখনই উত্তর আপডেট করেছি

— টি.ডি.ডি.আডু

Answer 27

ঠিক আছে, আমি এই পদক্ষেপগুলি অনুসরণ করেছি:

1. একটি ক্লাসের সাথে ডিভ iframe
2. যোগ iframeকরুন div।
3. সিএসএস ফাইলে,

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

এটি আইই 6 তে কাজ করে other অন্যান্য ব্রাউজারগুলিতে কাজ করা উচিত, চেক করুন!

Comments

iframe এর ভিতরে ডিভ নিয়ন্ত্রণ করতে হবে, এটি হয় না

— এমএসডি