কোনও আইফ্রেমে সামগ্রীর জন্য বডি স্টাইল ওভাররাইড করুন

Question

আমি কীভাবে কোনও এর মধ্যে কোনও শরীরের উপাদানটির পটভূমি চিত্র এবং রঙ নিয়ন্ত্রণ করতে পারি iframe? দ্রষ্টব্য, এম্বেডড বডি এলিমেন্টটির একটি বর্গ রয়েছে এবং এটি iframeএমন পৃষ্ঠার যা আমার সাইটের অংশ।

আমার এটির কারণটি হ'ল আমার সাইটের শরীরে একটি কালো পটভূমি নির্ধারিত হয়েছে এবং তারপরে একটি সাদা ব্যাকগ্রাউন্ড রয়েছে যা ডিভগুলিতে পাঠ্যযুক্ত। একজন ডাব্লুওয়াইএসআইওয়াইওয়াইজি সম্পাদক iframeসম্পাদনা করার সময় সামগ্রী এম্বেড করতে একটি ব্যবহার করে তবে এতে ডিভ অন্তর্ভুক্ত হয় না, সুতরাং পাঠ্যটি খুব শক্ত।

লাশ iframeযখন সম্পাদকে একটি বর্গ যে অন্য যে কোনো স্থানে ব্যবহার করা, তাই আমি এই সেখানে রাখা হয়েছে তাই এই মত সমস্যার সমাধান করা যেতে পারে অভিমানী করছি হয়েছে। যাইহোক, আমি যখন শৈলীগুলি প্রয়োগ করি তখন class.bodyতারা শরীরে প্রয়োগ করা শৈলীগুলিকে ওভাররাইড করে না। আশ্চর্যের বিষয় হ'ল স্টাইলগুলি ফায়ারব্যাগে প্রদর্শিত হয়, তাই কী ঘটছে তা আমার কোনও ধারণা নেই!

ধন্যবাদ

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

Comments

আইফ্রেমে সিএসএস প্রয়োগ করার

— 2540625

যদিও কোনও আইফ্রেমে কোনও কিছু স্পর্শ করা সম্ভব নয়, তবে অ্যাজাক্স অনুযায়ী URL টি <div>একবারে লোড করা অনেক সময় কাজ হতে পারে (যদি দেওয়া হয় সিওআরএস-শিরোনাম এটির জন্য অনুমতি দিচ্ছে) ... (এবং "স্যানিটাইজিং" লোড ডেটা রিজেপেক্সের মাধ্যমে) হ্যাঁ, সমস্ত হ্যাকি ...)

— ফ্র্যাঙ্ক নোক

পৃষ্ঠাটির ডোমেনগুলি মিললে আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন, তবে আপনি যে রঙগুলি পরিবর্তন করতে চান তা ওভাররাইড করার জন্য আপনার অভ্যন্তরীণ পৃষ্ঠার এইচটিএমএলটিতে কেবল একটি স্টাইল ব্লক রাখছেন না কেন? আপনার ওভাররাইডে আরও নির্বাচক যুক্ত করুন বা গুরুত্বপূর্ণ ব্যবহার করুন! অন্য সমস্ত কিছু যদি ব্যর্থ হয় তবে কেবলমাত্র সেই এক পৃষ্ঠায় আপনি যে কোনও রঙের শৈলী চান তা ওভাররাইড করতে ...

— ওজি শান

Answer 1

আপনার পৃষ্ঠায় একটি iframe একটি 'গর্ত' যা এর ভিতরে অন্য ওয়েব পৃষ্ঠা প্রদর্শন করে। Iframe এর সামগ্রীগুলি কোনও আকারে বা আপনার মূল পৃষ্ঠার অংশ হিসাবে নয়।

অন্যরা যেমন বলেছে, আপনার বিকল্পগুলি হ'ল:

• iframe এ লোড করা হচ্ছে এমন ফাইলটি দিন প্রয়োজনীয় সিএসএস
• যদি আইফ্রেমে ফাইলটি আপনার পিতামাতার মতো একই ডোমেন থেকে থাকে তবে আপনি পিতামাতার কাছ থেকে আইফ্রেমে নথির ডিওএম অ্যাক্সেস করতে পারেন।

Answer 2

নীচে কেবল যদি iframe সামগ্রী একই প্যারেন্ট ডোমেন থেকে আসে তবে কাজ করে।

নিম্নলিখিত jquery স্ক্রিপ্ট আমার জন্য কাজ করে। Chrome এবং IE8 এ পরীক্ষিত ested অভ্যন্তরীণ iframe একটি পৃষ্ঠা উল্লেখ করে যা পিতামাতার মতো একই ডোমেনে থাকে on

এই বিশেষ ক্ষেত্রে, আমি অভ্যন্তরের আইফ্রেমে একটি নির্দিষ্ট শ্রেণীর সাথে একটি উপাদান লুকিয়ে রাখছি।

মূলত, আপনি কেবল অভ্যন্তরীণ iframe এর 'মাথা' একটি 'স্টাইল' উপাদান যুক্ত করুন।

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

Comments

@ সিম্পলস্যাম 5 আপনি জাভাস্ক্রিপ্ট বিকল্প সরবরাহ করতে পারেন (জ্যাকুয়ারি ব্যবহার না করে)?

— কমলাকান্নান জে

@ সিনসারেকমাল এখানে jQuery এর প্রয়োজনীয়তা ছাড়াই কোডটি রয়েছে: jsfiddle.net/9g9wkpon আপনার শুধু জানতে হবে যে হাইফেনেটেড সিএসএসের বৈশিষ্ট্যগুলি আমার উদাহরণের মতো জাভাস্ক্রিপ্টে উটকেসে লিখিত আছে। :)

— ডেনিস98

jquery.js? ver = 1.12.4: 2 অপরিবর্তিত গৃহস্থালি ধারণা: 'HTMLIFrameElement' থেকে 'কন্টেন্ট ডকুমেন্ট' সম্পত্তিটি পড়তে ব্যর্থ: ক্রস-অরিজিন ফ্রেমে অ্যাক্সেস করা থেকে " xxxxxxxxx.com.com " সহ একটি ফ্রেম অবরুদ্ধ করেছে ।

— অ্যালেক্স স্টানিজ

জেরেমি হিসাবে অ্যালেক্সস্টানিজ বলেছেন, এটি কেবল তখনই কাজ করবে যদি ইফ্রাম পৃষ্ঠাটি একই সার্ভার থেকে পিতামাতার পৃষ্ঠা হিসাবে আসে ... যার অর্থ সাধারণত আপনাকে জাভাস্ক্রিপ্ট নিয়ে বিরক্ত করার দরকার নেই ... কেবল অন্য পৃষ্ঠায় সিএসএস যুক্ত করুন প্রথম অবস্থানে.

— ডিএ

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

— ডিএ

Answer 3

আপনি যদি সোজা এইচটিএমএল এবং / অথবা সিএসএস ফাইলগুলির মালিকানা না পান তবে কোনও আইফ্রেমে প্রদর্শিত পৃষ্ঠার স্টাইলটি পরিবর্তন করতে পারবেন না ।

এটি এক্সএসএস (ক্রস সাইট স্ক্রিপ্টিং) বন্ধ করতে হবে

Comments

'সরাসরি অ্যাক্সেস' বলতে কী বোঝ? Iframe এর পৃষ্ঠাটি আমার সাইট, এটির সমস্ত একটি ডোমেন।

— jd6699

ঠিক আছে তবে আপনাকে আপনার সাইটে উত্স ফাইলটি পরিবর্তন করতে হবে (আপনি কোনও আইফ্রেমে কোনও বিষয়বস্তু পরিবর্তন করতে পারবেন না) - সুতরাং যদি আইফ্রেমটি mysite.com/test.html এ নির্দেশ করে থাকে তবে আপনাকে সরাসরি পরীক্ষা.এইচটিএমএল পরিবর্তন করতে হবে .. ।

— মাইলস গ্রে

না পারেন? শর্তাধীন ওপি বলছে আপনি পারবেন। উদাহরণস্বরূপ, তার অভ্যন্তরীণ iframe URL টি তার পিতামাতার সাইট হিসাবে একই তাই তিনি আপনার পছন্দমতো জাভাস্ক্রিপ্টের যে কোনও স্বাদে DOM ঠিক আছে অ্যাক্সেস করতে সক্ষম হবেন ...

— ওজি শান

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

— কেভিন এম

Answer 4

একটির iframeআরও একটি সুযোগ রয়েছে, সুতরাং আপনি এটি স্টাইলে বা জাভাস্ক্রিপ্টের সাহায্যে এর সামগ্রী পরিবর্তন করতে পারবেন না।

এটি মূলত "অন্য পৃষ্ঠা"।

একমাত্র আপনি যা করতে পারেন তা হ'ল তার নিজস্ব সিএসএস সম্পাদনা করা, কারণ আপনার গ্লোবাল সিএসএসের সাহায্যে আপনি কিছুই করতে পারবেন না।

Comments

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

— ওজি শান

Answer 5

অন্য একটি ডোমেন iframe সিএসএস ওভাররাইড করুন

সিম্পল স্যাম 5 এর উত্তরের অংশটি ব্যবহার করে , আমি তাউকের কয়েকটি চ্যাট ইফ্রেমেসের সাথে এটি অর্জন করেছি (তাদের কাস্টমাইজেশন ইন্টারফেসটি ঠিক আছে তবে আমার আরও কাস্টমাইজেশন প্রয়োজন)।

মোবাইল ডিভাইসে প্রদর্শিত এই বিশেষ আইফ্রেমে আমার ডিফল্ট আইকনটি লুকিয়ে রাখতে এবং আমার পটভূমির একটি চিত্র স্থাপন করা দরকার needed আমি নিম্নলিখিতগুলি করেছেন:

Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
  $('#mtawkchat-minified-iframe-element').
    contents().find("head").append(
     $("<style type='text/css'>"+
       "#tawkchat-status-text-container {"+
         "background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
         "background-size: 100%;"+
       "} "+
       "#tawkchat-status-icon {display:none} </style>")
   );
};

আমি কোনও টকের ডোমেনের মালিক নই এবং এটি আমার পক্ষে কাজ করেছে, সুতরাং এটি একই প্যারেন্ট ডোমেন থেকে না থাকলেও আপনি এটি করতে পারেন ( স্যামের উত্তর সম্পর্কে জেরেমি বেকারের মন্তব্য থাকা সত্ত্বেও )

Comments

আমার সন্দেহ হয় এটি কেবলমাত্র কাজ করে কারণ তাওকের লোকেরা সুস্পষ্টভাবে এটির অনুমতি দিয়েছে।

— আইনজীবী

@ সিপিএইচপিথন সম্ভবত আপনি আমাকে সহায়তা করতে পারেন। এটি দেখুন: stackoverflow.com/questions/60923168/…

— সাফল্য ম্যান

Answer 6

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

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  'body {' +
  '  background-color: some-color;' +
  '  background-image: some-image;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

Comments

Blocked a frame with origin xxxxxxxxx from accessing a cross-origin frame.আমি ভয় করি এটি কাজ করবে না

— মাইক 21

Answer 7

আপনার যদি আইফ্রেমে হোস্টিং পৃষ্ঠার এবং আইফ্রেমের পৃষ্ঠার নিয়ন্ত্রণ থাকে তবে আপনি একটি ক্যোয়ারী প্যারামিটার যদি আইফ্রেমে পাস করতে পারেন ...

হোস্টিং সাইটটি মোবাইল কিনা তার উপর ভিত্তি করে আইফ্রেমে একটি শ্রেণি যুক্ত করার উদাহরণ এখানে রয়েছে ...

আইফ্রেম যুক্ত করা হচ্ছে:

var isMobile=$("mobile").length; //detect if page is mobile
var iFrameUrl ="https://myiframesite/?isMobile=" + isMobile; 

$(body).append("<div id='wrapper'><iframe src=''></iframe></div>");
$("#wrapper iframe").attr("src", iFrameUrl ); 

আইফ্রেমের ভিতরে:

//add mobile class if needed
var url = new URL(window.location.href);
var isMobile = url.searchParams.get("isMobile");
if(isMobile == "1") {
    $("body").addClass("mobile");
}

Comments

হতে পারে আপনি আমাকে সাহায্য করতে পারেন। এটি দেখুন: stackoverflow.com/questions/60923168/…

— সাফল্য ম্যান

Answer 8

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

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

ভিউপোর্ট, বিভিন্ন ব্যবহারকারী এজেন্টদের নির্দিষ্ট লেআউটগুলির সাথে আমার সমস্যা ছিল এবং এটিই আমার সমস্যার সমাধান করেছে:

<script language="javascript" type="text/javascript" src="https://gist.github.com/roliveiravictor/447f994a82238247f83919e75e391c6f.js"></script>

<script language="javascript" type="text/javascript">

function windowSize() {
  let gist = document.querySelector('#gist92442763');

  let isMobile = {
    Android: function() {
        return /Android/i.test(navigator.userAgent)
    },
    BlackBerry: function() {
        return /BlackBerry/i.test(navigator.userAgent)
    },
    iOS: function() {
        return /iPhone|iPod/i.test(navigator.userAgent)
    },
    Opera: function() {
        return /Opera Mini/i.test(navigator.userAgent)
    },
    Windows: function() {
        return /IEMobile/i.test(navigator.userAgent) || /WPDesktop/i.test(navigator.userAgent)
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

  if(isMobile.any()) {
    gist.style.width = "36%";
    gist.style.WebkitOverflowScrolling = "touch"
    gist.style.position = "absolute"
  } else {
    gist.style.width = "auto !important";
  }
}

windowSize();

window.addEventListener('onresize', function() {
    windowSize();
});

</script>

<style type="text/css">

.gist-data {
  max-height: 300px;
}

.gist-meta {
  display: none;
}

</style>

যুক্তিটি হ'ল সংক্ষিপ্ত সেট (বা আপনার উপাদান) ব্যবহারকারী এজেন্টের উপর ভিত্তি করে। নির্বাচককে জিজ্ঞাসা করার আগে প্রথমে আপনার উপাদানটি সনাক্ত করতে ভুলবেন না। প্রতিক্রিয়া কীভাবে কাজ করছে তা একবার নির্দ্বিধায় দেখুন ।

Answer 9

সম্ভবত এটি এখন পরিবর্তন হয়েছে তবে আমি এই উপাদানটির সাথে একটি পৃথক স্টাইলশিট ব্যবহার করেছি:

.feedEkList iframe
{
max-width: 435px!important;
width: 435px!important;
height: 320px!important;
}

এম্বেড থাকা ইউটিউব ইফ্রেমেস সাফল্যের সাথে স্টাইল করতে ... এই পৃষ্ঠায় ব্লগ পোস্টগুলি দেখুন ।

Comments

যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত পৃষ্ঠাগুলি পরিবর্তিত হলে লিঙ্ক-শুধুমাত্র উত্তরগুলি অবৈধ হতে পারে।

— শাইফুল ইসলাম

এটি কেবলমাত্র আইফ্রেম উপাদানটির জন্যই প্রযোজ্য - প্রশ্নটি আইফ্রেম সামগ্রী সম্পর্কে বিশেষভাবে জিজ্ঞাসা করে, যা বর্তমানে কেবল সিএসএসের মাধ্যমে পরিবর্তন করা সম্ভব নয়।

— pwdst

@ শাইফুলআইসলাম যা হুবহু যা ঘটেছিল। রেন্ডিং টিমস উত্তর অকেজো।

— অ্যালেক্স ফক্সলিহ

Answer 10

আপনার iframe পৃষ্ঠার বডিটিকে একটি আইডি দিন (বা শ্রেণি যদি আপনি চান)

<html>
<head></head>
<body id="myId">
</body>
</html>

তারপরে, এছাড়াও iframe পৃষ্ঠার মধ্যে, সিএসএস এ একটি পটভূমি নির্ধারণ করুন

#myId {
    background-color: white;
}

Comments

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

— jd6699

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

— মাইকق

এটি আমার সাইট থেকে, তবে এটি সম্পাদকের দ্বারা সম্পাদিত হওয়ার ফলে এটি যে চিহ্নটিটি টেনে আনা হয়েছে তা পরিবর্তন করা সহজ হবে না।

— jd6699

PS বলতে চাইনি আপনার মূল পৃষ্ঠায় আইডি = "মাইআইডি" যুক্ত করুন, তবে আইফ্রেমের মধ্যে থাকা পৃষ্ঠায়। এই ভাবে আপনি আপনার প্রধান পৃষ্ঠায় আলাদা স্টাইলের সাহায্যে আইফ্রেম পৃষ্ঠার বডিটিকে লক্ষ্য করতে পারেন। আপনি নিজের আইফ্রেম পৃষ্ঠাগুলিতে সিএসএস ফাইলটি উল্লেখ করছেন আপনিও নন। আপনার আইফ্রেমে লোড হওয়া পৃষ্ঠাটিকে সম্পূর্ণ স্বতন্ত্র পৃষ্ঠা হিসাবে চিকিত্সা করা দরকার। আপনি যদি কেবল সেই পৃষ্ঠাটি কোনও ওয়েব ব্রাউজারে লোড করেন তবে এটির সঠিক শৈলী আছে?

— মাইকق

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

— jd6699