আইফ্রেমের অভ্যন্তরে ডিভ স্টাইলকে প্রভাবিত করতে সিএসএস ব্যবহার করা

Question

কেবলমাত্র CSS ব্যবহার করে পৃষ্ঠায় কোনও আইফ্রেমের অভ্যন্তরে থাকা কোনও ডিভের শৈলীগুলি পরিবর্তন করা কি সম্ভব?

Comments

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

— আলেকজান্ডার ও'মারারা

সম্পর্কে আরও তথ্য CORS : wikipedia.org/wiki/Content_Security_Policy এবং developer.mozilla.org/docs/Web/HTTP/CORS

— ashleedawg

Answer 1

আপনার জাভাস্ক্রিপ্ট দরকার। এটি প্যারেন্ট পৃষ্ঠায় করা সমান, আপনি নিজের জাভাস্ক্রিপ্ট কমান্ডটি ইফ্রেমের নাম সহ উপস্থাপন করতে পারেন।

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

আমি এটিকে আরও সহজ করতে প্রোটোটাইপ কাঠামোটি ব্যবহার করি :

frame1.$('mydiv').style.border = '1px solid #000000'

অথবা

frame1.$('mydiv').addClassName('withborder')

Comments

আমার এই প্রশ্নটি দেখুন এটি একই স্ট্যাকওভারফ্লো.com/ প্রশ্নস / ১৯627070০7/২ কিন্তু ফ্রেম অন্য সার্ভারের থেকে থাকলে আমরা কী স্টাইল পরিবর্তন করতে পারি না?

— জিতেন্দ্র ব্যাস

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

— ডায়োডিয়াস - জেমস ম্যাকফার্লেন

ঠিক "কেবল CSS" সমাধান নয়, তবে আমার পক্ষে যথেষ্ট ভাল। +1

— নিকু সুরডু

এটি সিএসএস নয়।

— স্ট্রেমিন

Answer 2

সংক্ষেপে ন।

ক্রস-ডোমেন রিসোর্স সীমাবদ্ধতার কারণে যদি আপনার আইফ্রেমে লোড হওয়া পৃষ্ঠার উপর নিয়ন্ত্রণ না থাকে তবে আপনি এইচটিএমএল-এ এইচটিএমএল প্রয়োগ করতে পারবেন না an

Comments

এটি সত্য তবে সত্য কীভাবে লোকেরা উদাহরণ দিতে সাহায্য করবেন না

— সাইমন ড্রাগসব্যাক

এটি কি 2018 সালে উঠে এসেছে? আমার মনে আছে আমি বাইরে থেকে এসে আইফ্রেমের স্টাইলটি কনফিগার করেছিলাম। আমি যে স্ক্রিপ্ট দ্বারা রেন্ডার আইফ্রেম সিএসএস প্রয়োগ করার চেষ্টা করেছিলেন কিন্তু এটা work.l না STIL

— Vo মিন

Answer 3

হ্যাঁ. বিশদটির জন্য এই অন্যান্য থ্রেডটি একবার দেখুন: কীভাবে আইফ্রেমে সিএসএস প্রয়োগ করবেন?

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

Comments

ফ্রেম 1 ইফ্রেমের আইডি ??

— টনি মিশেল কাবাবেট

হ্যাঁ, ফ্রেম 1 ইফ্রেমের আইডি।

— ইউজিন রোজেনফিল্ড

এটি কোনও সিএসএস নয়।

— স্ট্রেমিন

আমরা যদি ইফ্রেমে বিভিন্ন ডোমেন লোড করি তবে এটি আমরা করতে পারি না।

— সুনিথ সাগা

frame1আইফ্রেমের নাম নয়, আইডি নয়

— joseantgv

Answer 4

আপনি iframeপ্রথমে সামগ্রীগুলি পুনরুদ্ধার করতে পারেন এবং তারপরে jQueryযথাযথভাবে তাদের বিরুদ্ধে নির্বাচকগুলি ব্যবহার করতে পারেন ।

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });

শুভকামনা!

Comments

কাজ করে না: আনকৃত ডোমেক্সেপশন: 'এইচটিএমএলআইফ্রেমইলেটমেন্ট' থেকে 'কন্টেন্ট ডকুমেন্ট' সম্পত্তিটি পড়তে ব্যর্থ হয়েছে: ক্রস-অরিজিন ফ্রেমে অ্যাক্সেস করা থেকে " HOST " উত্সযুক্ত একটি ফ্রেম ব্লক করা হয়েছে ।

— টব্বো

@ টব্বো, আপনার ক্ষেত্রে, আপনি এক্সএসএস থেকে প্রতিরোধকৃত অননুমোদিত সাইটগুলি এম্বেড করতে পারবেন না। এটি কেবল হ্যাকার নয়, তাদের নিজের সমস্যা খুঁজছেন তাদের জন্য: পি

— রিয়াজ হামেদ

Answer 5

দ্রুত উত্তর: না, দুঃখিত।

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

Answer 6

জ্যাকুরিটি ব্যবহার করুন এবং উত্সটি লোড না হওয়া পর্যন্ত অপেক্ষা করুন, আমি এভাবেই অর্জন করেছি (ব্যবহৃত কৌণিক বিরতি, আপনি জাভাস্ক্রিপ্ট সেট অভ্যন্তরীণ পদ্ধতি ব্যবহার করতে পারেন):

var addCssToIframe = function() {
    if ($('#myIframe').contents().find("head") != undefined) {
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    }
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

Comments

আপনি কেন iframe লোড ইভেন্ট ব্যবহার করবেন না?

— প্রলিজিক

Answer 7

সম্ভবত আপনি যেভাবে ভাবছেন সেভাবে নয়। iframe <link>সিএসএস ফাইলেও করতে হবে। এবং এটি জাভাস্ক্রিপ্ট দিয়েও আপনি এটি করতে পারবেন না যদি এটি অন্য কোনও ডোমেনে থাকে।

Comments

আপনি কীভাবে এটি করা যেতে পারে তার একটি উদাহরণ দিতে পারেন? তুমি কি এরকম কিছু বোঝাতে চাও <iframe src="/source" link=css-stylesheet:"/css.css">?

— পিপীলিকা

Answer 8

স্পষ্টতই এটি jQuery এর মাধ্যমে করা যেতে পারে:

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

https://stackoverflow.com/a/13959836/1625795

Comments

ক্রোম ব্রাউজারে একই উত্স নীতির কারণে আপনি এটি আর ব্যবহার করতে পারবেন না। ত্রুটির বার্তা:Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.

— মোহাম্মদ আলবান্না

@ অ্যাডামজ, আমরা কি আইফ্রেমে উপাদানটির ওভাররাইট স্টাইল শীট পরিবর্তন করতে পারি? যদি হ্যাঁ, দয়া করে স্ক্রিপ্ট যোগ করুন।

— সুপার মডেল

Answer 9

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

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

Answer 10

শুধু এটি যোগ করুন এবং সমস্ত কাজ ভাল:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

Comments

এটি প্রদত্ত প্রশ্নের সঠিক উত্তর কিনা তা নিশ্চিত নন, তবে এটি গুগল ফর্মটি ডিভাইসের প্রস্থে পুনরায় আকার দেওয়ার এক দুর্দান্ত সমাধান ছিল, অনেক ধন্যবাদ!

— শিফটস্কেলস

Answer 11

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

তথ্যসূত্র:

• আইএফআরএম-এর মুদ্রণ সামগ্রী
• পিএইচপি বা জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল উত্স কোড অ্যাক্সেস এবং মুদ্রণ করা
• http://www.w3schools.com/js/js_htmldom_html.asp
• http://www.w3schools.com/js/js_htmldom_css.asp

Comments

প্রশ্নটি বিশেষত "শুধুমাত্র সিএসএস ব্যবহার করে" জিজ্ঞাসা করে। এটি মনে রেখে, আপনার উত্তরটি ভুল।

— সার্জ সাগান

এটি সিএসএস নয়।

— স্ট্রেমিন

Answer 12

বিভিন্ন সমাধানের সংমিশ্রণ, এটি আমার জন্য কাজ করেছিল।

$(document).ready(function () {
    $('iframe').on('load', function() {
        $("iframe").contents().find("#back-link").css("display", "none");
    }); 
});

Answer 13

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

Comments

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

— pwdst