আমি কীভাবে আইফ্রেমের সামগ্রীটি স্কেল করতে পারি?

Question

কীভাবে আমি আমার ওয়েবসাইটের একটি পৃষ্ঠায় একটি ইফ্র্যামের সামগ্রী (আমার উদাহরণে এটি একটি HTML পৃষ্ঠা, এবং একটি পপআপ নয়) স্কেল করতে পারি?

উদাহরণস্বরূপ, আমি মূল আকারের 80% এ আইফ্রেমে প্রদর্শিত সামগ্রীটি প্রদর্শন করতে চাই।

Comments

প্রশ্ন স্ক্র্যাপিং - ভাল অনুশীলন? আমি তাই মনে করি না.

— কনরাড রুডল্ফ

সাধারণ ব্যবহারের ক্ষেত্রে: একটি অনলাইন

— উইসইভিগ

Answer 1

আপনি সিএসএস এ পরিবর্তন করলে কিপের সমাধান অপেরা এবং সাফারিতে কাজ করা উচিত:

<style>
    #wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
    #frame { width: 800px; height: 520px; border: 1px solid black; }
    #frame {
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
    }
</style>

আপনি ওভারফ্লোও নির্দিষ্ট করতে চাইতে পারেন: স্ক্রোলবারগুলি রোধ করতে # ফ্রেমে লুকানো।

Comments

@ জোনাথনম - সিএফ মেটা.স্ট্যাকেক্সেঞ্জার / প্রশ্নস / 50৫০৩/২ , আমি কি এখানে কিছু ভুল করেছি?

— lxs

@ এলএক্স, মোটেও নয়। আমি এটি পছন্দ করেছি এবং এটি একটি +1 দিয়েছি। ভাল করেছ.

— জোনাথন এম

আমি লক্ষ করেছি যে ক্রোমে আমি জুম এবং ওয়েবকিট ট্রান্সফর্ম উভয়ই প্রয়োগ করি যার ফলে স্কেলটি দুইবার প্রয়োগ করা যায়।

— ড্যানিসজেটায়লর

যেমন @ এডনিসজেটায়লর বলেছেন, ক্রোম মনে হয় স্কেলটি দু'বার প্রয়োগ হয়েছে - যেমনটি এখানে দেখা গেছে jsfiddle.net/zjTBq/ebded/result

— ঘোড়া

যেহেতু সমস্ত আধুনিক ব্রাউজারগুলি বেশ কিছুক্ষণ ধরে রূপান্তরকে সমর্থন করে আসছে আমি অব্যর্থিকিত সংস্করণ (কমপক্ষে বিকল্প হিসাবে) ব্যবহার করার বিষয়টি বিবেচনা করব।

— ওয়ার্টওয়ার্ট

Answer 2

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

<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame { zoom: 0.75; -moz-transform: scale(0.75); -moz-transform-origin: 0 0; }
</style>

...

<p>Some text before the frame</p>
<div id="wrap">
<iframe id="frame" src="test2.html"></iframe>
</div>
<p>Some text after the frame</p>
</body>

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

আমি এই প্রশ্ন থেকে এর কিছু খুঁজে পেয়েছি ।

Answer 3

আইই 8, 9, এবং 10 এ এটি কাজ করার জন্য কয়েক ঘন্টা চেষ্টা করার সাথে লড়াই করার পরে এখানে আমার জন্য কী কাজ করেছে তা এখানে।

এই স্ট্রিপড ডাউন সিএসএস এফএফ 26, ক্রোম 32, অপেরা 18 এবং আই 9 -11 এ 1/7/2014 পর্যন্ত কাজ করে:

.wrap
{
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}

.frame
{
    width: 1280px;
    height: 786px;
    border: 0;

    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

আইই 8-র জন্য, iframe এর সাথে মিলের জন্য প্রস্থ / উচ্চতা নির্ধারণ করুন এবং। মোড়ক ধারক বিভাগে -ms-zoom যুক্ত করুন:

.wrap
{
    width: 1280px; /* same size as frame */
    height: 768px;
    -ms-zoom: 0.25; /* for IE 8 ONLY */
}

শর্তসাপেক্ষে উপযুক্ত সিএসএস অন্তর্ভুক্ত করার জন্য ব্রাউজার স্নিফিংয়ের জন্য আপনার পছন্দসই পদ্ধতিটি ব্যবহার করুন, দেখুন * * সিএসএস ফাইলের মধ্যে ব্রাউজার নির্দিষ্ট শর্তসাপেক্ষ সিএসএস করার কোনও উপায় আছে কি? কিছু ধারণা জন্য।

আইই 7 হ'ল একটি হারিয়ে যাওয়া কারণ যেহেতু -8-জুমের আই -8 অবধি উপস্থিত ছিল না।

এখানে আমি পরীক্ষিত আসল এইচটিএমএল:

<div class="wrap">
   <iframe class="frame" src="http://time.is"></iframe>
</div>
<div class="wrap">
    <iframe class="frame" src="http://apple.com"></iframe>
</div>

http://jsfiddle.net/esassaman/PnWFY/

Answer 4

আমি কেবল পরীক্ষা করেছি এবং আমার জন্য, অন্যান্য সমাধানগুলির কোনওটিই কাজ করে না। আমি কেবল এটি চেষ্টা করেছিলাম এবং এটি ফায়ারফক্স এবং ক্রোমে পুরোপুরি কাজ করেছিল, যেমনটি আমি প্রত্যাশা করেছিলাম:

<div class='wrap'>
    <iframe ...></iframe>
</div>

এবং সিএসএস:

.wrap {
    width: 640px;
    height: 480px;
    overflow: hidden;
}

iframe {
    width: 76.92% !important;
    height: 76.92% !important;
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

এটি 30% দ্বারা সমস্ত সামগ্রী স্কেল করে। অবশ্যই প্রস্থ / উচ্চতা শতাংশ শতাংশ সেই অনুযায়ী সামঞ্জস্য করা প্রয়োজন (1 / স্কেল_ ফ্যাক্টর)।

Comments

আপনি উপাদানটিতে যুক্ত overflow: hidden;করতে চান .wrap। আপনি যখন ব্যবহার করেন তখন iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe উপচে পড়া শুরু হয়।

— ওজগ্রোজার

এটি অত্যাধুনিক পদ্ধতির approach ধন্যবাদ!

— ফুগি

Answer 5

থেকে ফলোআপ lxs এর উত্তর কোথায় উভয় থাকার সময় আমি একটি সমস্যা লক্ষ্য করেছি zoomএবং --webkit-transformএকই সময়ে ট্যাগ একটি করে Chrome (সংস্করণ 15.0.874.15) লজ্জা দেয় বলে মনে হয় প্রভাব সাজানোর ডাবল জুম। আমি কেবল ট্যাগ ব্যবহার করার জন্য ক্রোম রেখে, (কেবলমাত্র আইই লক্ষ্যবস্তু) zoomদিয়ে প্রতিস্থাপন করে ইস্যুটি নিয়ে কাজ করতে সক্ষম হয়েছি এবং এটি পরিষ্কার হয়ে গেছে।-ms-zoom--webkit-transform

Answer 6

আপনাকে অতিরিক্ত ট্যাগ দিয়ে আইফ্রেমে মোড়ানো দরকার নেই। কেবলমাত্র নিশ্চিত হয়ে নিন যে আপনি যদি ইফ্রেমে স্কেল করে থাকেন তবে একই পরিমাণে আপনি যদি ইফ্রেমের প্রস্থ এবং উচ্চতা বৃদ্ধি করেন।

উদাহরণস্বরূপ iframe বিষয়বস্তু 80% স্কেল করতে:

#frame { /* Example size! */
    height: 400px; /* original height */
    width: 100%; /* original width */
}
#frame {
    height: 500px; /* new height (400 * (1/0.8) ) */
    width: 125%; /* new width (100 * (1/0.8) )*/

    transform: scale(0.8); 
    transform-origin: 0 0;
}

মূলত, একই আকারের iframe পেতে আপনাকে মাত্রাগুলি স্কেল করতে হবে।

Answer 7

এইচটিএমএল {জুম: 0.4;}? -)

Comments

এটি ৮০% এর জন্য ০.৮ হবে তবে এটি মালিকানাধীন মাইক্রোসফিজম, তাই সম্ভবত উপযুক্ত নয়। এটি কেবল তখনই কাজ করবে যদি ফ্রেমে লোড হওয়া দস্তাবেজটি সম্পাদনা করা যায়, যা অসম্ভব।

— কোয়ান্টিন

Answer 8

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

এই উদাহরণে সুনির্দিষ্ট অফসেট এবং জুম ফ্যাক্টরটি ফেসবুক ট্যাব (810 পিক্স প্রস্থ) এর জন্য দুটি ওয়েবসাইটকে সংক্ষেপে এবং কেন্দ্রের জন্য কাজ করেছে।

ব্যবহৃত দুটি সাইট হ'ল একটি ওয়ার্ডপ্রেস সাইট এবং একটি নিং নেটওয়ার্ক। আমি এইচটিএমএল নিয়ে খুব একটা ভাল নই, সুতরাং সম্ভবত এটি আরও ভাল করা যেতে পারে তবে ফলাফলটি ভাল বলে মনে হচ্ছে।

<style>
    #wrap { width: 1620px; height: 3500px; padding: 0; position:relative; left:-100px; top:0px; overflow: hidden; }
    #frame { width: 1620px; height: 3500px; position:relative; left:-65px; top:0px; }
    #frame { -ms-zoom: 0.7; -moz-transform: scale(0.7); -moz-transform-origin: 0px 0; -o-transform: scale(0.7); -o-transform-origin: 0 0; -webkit-transform: scale(0.7); -webkit-transform-origin: 0 0; }
</style>
<div id="wrap">
    <iframe id="frame" src="http://www.example.com"></iframe>
</div>

Answer 9

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

function()
{
    var _wrapWidth=$('#wrap').width();
    var _frameWidth=$($('#frame')[0].contentDocument).width();

    if(!this.contentLoaded)
      this.initialWidth=_frameWidth;
    this.contentLoaded=true;
    var frame=$('#frame')[0];

    var percent=_wrapWidth/this.initialWidth;

    frame.style.width=100.0/percent+"%";
    frame.style.height=100.0/percent+"%";

    frame.style.zoom=percent;
    frame.style.webkitTransform='scale('+percent+')';
    frame.style.webkitTransformOrigin='top left';
    frame.style.MozTransform='scale('+percent+')';
    frame.style.MozTransformOrigin='top left';
    frame.style.oTransform='scale('+percent+')';
    frame.style.oTransformOrigin='top left';
  };

এটি iframe এবং এর বিষয়বস্তু স্কেলকে মোড়ক ডিভের 100% প্রস্থে (বা আপনি যত শতাংশই চান) করতে পারবেন। একটি যুক্ত বোনাস হিসাবে, আপনাকে ফ্রেমের সিএসএসকে হার্ড কোডিং মানগুলিতে সেট করতে হবে না কারণ সেগুলি সমস্ত গতিশীলভাবে সেট করা হবে, আপনি কীভাবে মোড়ানো ডিভিটি প্রদর্শন করতে চান তা নিয়ে আপনাকে কেবল চিন্তা করতে হবে।

আমি এটি পরীক্ষা করেছি এবং এটি ক্রোম, আইই ১১ এবং ফায়ারফক্সে কাজ করে।

Answer 10

আমি মনে করি আপনি জাভাস্ক্রিপ্টের মাধ্যমে আপনি যে উচ্চতা এবং প্রস্থটি চান তা গণনা করে (ডকুমেন্ট.বি.সি.এল.কমেন্ট উইথথের মাধ্যমে ইত্যাদি) এবং তারপরে আপনার এইচটিএমএলে ইফ্রেমে ইনজেকশন দিয়ে এটি করতে পারেন:

var এলিমেন্ট = ডকুমেন্ট.জিটেলমেন্টবিআইআইডি ("মায়িড");
উপাদান.innerHTML + = "<iframe src = 'http: //www.google.com' উচ্চতা = '200' প্রস্থ = '" + document.body.clientWidth * 0.8 + "' />";

আমি এটি আই 6 তে পরীক্ষা করি নি তবে মনে হয় এটি ভালগুলির সাথে কাজ করবে :)

Comments

আমার অজ্ঞতাটি ক্ষমা করবেন তবে উত্স পৃষ্ঠাটি জুম আউট করার পরিবর্তে ইফ্রমেটটি কি 80% উত্স পৃষ্ঠা তৈরি করবে না?

— ফিল হিলি

Answer 11

আইআই তে কাজ করতে আপনারা যারা সমস্যায় পড়েন তাদের জন্য -ms-zoomনীচের পরামর্শ মতো আইডি #wrapনয়, ডিভের উপর জুম ফাংশনটি ব্যবহার করা সহায়ক iframe। আমার অভিজ্ঞতায়, zoomফাংশনটি দিয়ে iframe ডিভ এর স্কেল করার চেষ্টা করছে#frame করে তবে এটি আইফ্রেমে আকার এবং এটির মধ্যে থাকা সামগ্রীকে স্কেল করে না (যা আপনি যাচ্ছেন)।

এটা এমন দেখতে. আইই 8, ক্রোম এবং এফএফে আমার জন্য কাজ করে।

#wrap {
  overflow: hidden;
  position: relative;
  width:800px;
  height:850px;
  -ms-zoom: 0.75;
}

Comments

ব্যবহারের zoomIE8 মধ্যে স্ট্যান্ডার্ড মোড, ব্যবহার -ms-zoomquirks মোডে আছে।

— জনাথন হিল

Answer 12

890px প্রস্থ সহ একটি পৃষ্ঠায় এটি আমার সমাধান ছিল

#frame { 
overflow: hidden;
position: relative;
width:1044px;
height:1600px;
-ms-zoom: 0.85;
-moz-transform: scale(0.85);
-moz-transform-origin: 0px 0;
-o-transform: scale(0.85);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.85);
-webkit-transform-origin: 0 0; 

}

Answer 13

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

http://www.genautica.com/sandbox/woodmark-index.html

Answer 14

সুতরাং সম্ভবত সেরা সমাধান নয়, তবে ঠিক আছে বলে মনে হচ্ছে।

<IFRAME ID=myframe SRC=.... ></IFRAME>

<SCRIPT>
    window.onload = function(){document.getElementById('myframe').contentWindow.document.body.style = 'zoom:50%;';};
</SCRIPT>

অবশ্যই কিছুটা জাভাস্ক্রিপ্ট দিয়ে সন্তানের শরীরে "জুম: 50%" স্টাইল যুক্ত করে পিতামাতাকে ঠিক করার চেষ্টা করছেন না।

হতে পারে "এইচটিএমএল" উপাদানটির স্টাইল সেট করতে পারে, তবে এটি চেষ্টা করে নি।

Comments

এটি করবেন না। বিকাশকারী.মোজিলা.অর্গ থেকে / মার্কিন- ডকস / ওয়েবে / সিএসএস / জুম : "এই বৈশিষ্ট্যটি মানহীন এবং মানক ট্র্যাকের উপরে নেই it এটি ওয়েবের মুখোমুখি প্রোডাকশন সাইটগুলিতে ব্যবহার করবেন না: এটি কাজ করবে না প্রতিটি ব্যবহারকারীর। বাস্তবায়ন এবং আচরণের মধ্যে ভবিষ্যতে বড় ধরনের অসুবিধাগুলিও হতে পারে। "

— হ্যাকেল

+1 এটি (iframe এর বিষয়বস্তু পরিবর্তন করা, iframe নিজেই নয়) একটি ভাল ধারণা বলে মনে হচ্ছে। আমার কোনও পৃষ্ঠার স্কেল করে সেই পৃষ্ঠাটির পূর্বরূপ হিসাবে দেখানোর জন্য একটি উপায় প্রয়োজন এবং এই পদ্ধতির সমস্যার সমাধান হয়েছে solved

— আকিনুরি

@ ইয়াকুনুরী হ্যাঁ আমি এটির জন্যই ব্যবহার করেছি। আমি বেশ কয়েকটি সমাধান দিয়েছি তবে এটি সবচেয়ে সহজ বলে মনে হয়েছিল। আমি কেবল আইফ্রেমগুলি দিয়ে পুনরাবৃত্তি করেছি এবং থাম্বনেইলের একটি পৃষ্ঠা পেতে সেগুলি সমস্ত সঙ্কুচিত করেছি। শিশু পৃষ্ঠাগুলিতে কোনও পরিবর্তন প্রয়োজন।

— গ্রাহাম

Answer 15

যদি আপনার এইচটিএমএল CSS এর সাথে স্টাইলযুক্ত হয় তবে আপনি সম্ভবত বিভিন্ন মাপের জন্য বিভিন্ন স্টাইল শীটকে লিঙ্ক করতে পারেন।

Answer 16

আমি এইচটিএমএল এর যেমন কার্যকারিতা আছে বলে মনে করি না। আমি যে কৌশলটি করতে পারি তা কেবলমাত্র কিছু সার্ভার-সাইড প্রসেসিং করা imagine আপনি যে ওয়েবপৃষ্ঠা পরিবেশন করতে চান এটির একটি চিত্র স্ন্যাপশট পেতে পারে, এটি সার্ভারে স্কেল করে ক্লায়েন্টের কাছে পরিবেশন করতে পারে। এটি তবে একটি ইন্টারঅ্যাকটিভ পৃষ্ঠা হবে। (সম্ভবত কোনও চিত্রম্যাপের লিঙ্কটি থাকতে পারে তবে এখনও।)

অন্য ধারণাটি হ'ল এমন একটি সার্ভার-সাইড উপাদান রয়েছে যা এইচটিএমএলকে পরিবর্তন করবে। ফায়ারফক্স ২.০ জুম বৈশিষ্ট্যটির মতো। এটি অবশ্যই নিখুঁত জুমিং নয়, তবে কিছুই না থেকে ভাল।

তা ছাড়া আমি ধারণার বাইরে আছি।

Answer 17

যেমনটি বলা হয়েছে, আমি সন্দেহ করি আপনি এটি করতে পারেন।
কোনও স্টাইল সেট করে আপনি কমপক্ষে পাঠ্যকেই স্কেল করতে পারেন font-size: 80%;।
পরীক্ষিত, নিশ্চিত নয় যে এটি কাজ করে, এবং বাক্স বা চিত্রগুলিকে পুনরায় আকার দেবে না।