জাভাস্ক্রিপ্ট দিয়ে কীভাবে পুরো ডকুমেন্টের উচ্চতা পাবেন?

333

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

http://fandango.com
http://paperbackswap.com

ফানডাঙ্গোতে
jQuery এর $(document).height();রিটার্নগুলিতে সঠিক মান
document.height0
document.body.scrollHeightফেরত 0

পেপারব্যাক অদলবদুতে:
jQuery এর $(document).height();টাইপ এরিয়ার: $(document)নাল
document.heightএকটি ভুল মান
document.body.scrollHeightএকটি ভুল মান প্রদান করে

দ্রষ্টব্য: আমার কাছে ব্রাউজার স্তরের অনুমতি আছে, যদি সেখানে কিছু কৌশল থাকে।

javascript 
— নিকের
সূত্র
5
document (দস্তাবেজ) নাল কারণ এই সাইটে jQuery বোঝা নেই ...
— জেমস
এইচএম, শপথ করতে পারলাম jQuery নিবন্ধিত হয়েছে তা নিশ্চিত করার জন্য আমি অন্য কিছু পরীক্ষা করে দেখেছি তবে মনে হয় না যে আমি করেছি, এইচএ! আমি ভেবেছিলাম ফায়ারব্যাগে jQuery প্যাকেজড ছিল ... এইচএম, আমি মনে করি এটি সমাধান হলে আমি এটি পরীক্ষা করে নেব।
— নিক
4
ফায়ারবগে জ্যাকুয়ারি প্যাকেজ নেই
— harsimranb
ব্রাউজার উইন্ডোটির আকার অনুসন্ধান করা দেখুন । এটিতে বিভিন্ন ব্রাউজারের আচরণের দুর্দান্ত টেবিল রয়েছে।
— ওরিওল

উত্তর:

670

ডকুমেন্ট মাপগুলি একটি ব্রাউজারের সামঞ্জস্যের দুঃস্বপ্ন, কারণ যদিও সমস্ত ব্রাউজারগুলি ক্লায়েন্টহাইট এবং স্ক্রোলহাইট বৈশিষ্ট্যগুলি প্রকাশ করে তবে মানগুলি কীভাবে গণনা করা হয় সেগুলি তারা সকলেই একমত হয় না।

আপনি সঠিক উচ্চতা / প্রস্থের জন্য কীভাবে পরীক্ষা করেছেন তার আশেপাশে একটি জটিল সেরা অনুশীলনের সূত্র ছিল। এটি ডকুমেন্ট.ডোকমেন্টএলমেন্ট বৈশিষ্ট্যগুলি ব্যবহারের সাথে জড়িত রয়েছে যদি উপলভ্য থাকে বা নথির বৈশিষ্ট্যগুলিতে পিছনে পড়ে যায় so

সঠিক উচ্চতা পাওয়ার সবচেয়ে সহজ উপায় হ'ল ডকুমেন্ট বা ডকুমেন্টএলমেন্টে সমস্ত উচ্চতার মান পাওয়া এবং সর্বোচ্চটি ব্যবহার করা। এটি মূলত jQuery যা করে:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

ফায়ারব্যাগ + jQuery বুকমার্কলেট সহ একটি দ্রুত পরীক্ষা উভয় উদ্ধৃত পৃষ্ঠাগুলির জন্য সঠিক উচ্চতা দেয় এবং কোড উদাহরণটিও দেয়।

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

— Borgar
সূত্র
2
এই সমাধানটিকে রেট দিন, কারণ এটি কাজ করে যখন আপনি প্রোটোটাইপ লাইব্রেরি ব্যবহার করছেন, jQuery এর সাথে এ জাতীয় কোনও সমস্যা নেই
— se_pavel
10
আইফ্রেমেস এবং জ্যাকোয়ারি নিয়ে কাজ করার সময়, গণনার এই পদ্ধতির কারণে, iframe নথির উচ্চতা সর্বদা iframe নিজেই এর উচ্চতা হতে হবে। আপনি যখন বিষয়বস্তু মেলে আইফ্রেমের উচ্চতা হ্রাস করতে চান তখন এটি লক্ষ্য করা গুরুত্বপূর্ণ। আপনাকে প্রথমে ইফ্রেমের উচ্চতাটি পুনরায় সেট করতে হবে।
— ডেভিড লে
3
আমার কাছে আইফ্রেম বাড়ানো এবং এটি সঙ্কুচিত করার প্রয়োজন হয়েছিল (ফেসবুক অ্যাপ্লিকেশন) এবং সন্ধান পেয়েছি যে ডকুমেন্ট.বডি.অফসেটহাইটটি আমার পক্ষে সেরা পছন্দ, সবচেয়ে ব্রাউজার দ্বারা নির্ভুলভাবে সমর্থিত।
— জেফজি
1
এটি দুর্দান্ত যদিও ডকুমেন্টটি প্রস্তুত না হলে ভুল ফলাফল দিতে পারে - যেমন সার্ভার উত্পন্ন কোডে ব্যবহৃত হয় ...
— স্টুয়ার্টডটনেট
1
ডকুমেন্টটি প্রস্তুত হওয়ার আগে পরীক্ষা করে কাজ করবে না। উত্পন্ন কোড / নথিগুলির সাথে এর কোনও সম্পর্ক নেই বরং ডকুমেন্টটি কীভাবে লোড হয়। দস্তাবেজটি প্রস্তুত হওয়ার পরে পরীক্ষাটি অবশ্যই চালানো উচিত এবং আমি কেবলমাত্র ডকুমেন্টটি পুরোপুরি লোড হওয়ার পরে এটি চালানোর পরামর্শ দিচ্ছি কারণ বাকী আইটেমগুলি উচ্চতাকে প্রভাবিত করতে পারে, ব্রাউজারকেও আকার পরিবর্তন করতে পারে।
— বোরগার
213

এটি একটি সত্যই পুরানো প্রশ্ন এবং এর ফলে অনেক পুরানো উত্তর রয়েছে। 2020 পর্যন্ত সমস্ত বড় ব্রাউজার মানকে মেনে চলে ।

2020 এর জন্য উত্তর:

document.body.scrollHeight

সম্পাদনা করুন: উপরেরগুলি <body>ট্যাগটিতে মার্জিনগুলি অ্যাকাউন্টে নেয় না। যদি আপনার শরীরে মার্জিন থাকে তবে ব্যবহার করুন:

document.documentElement.scrollHeight
— Marquizzo
সূত্র
এইচএম - এখন আমি এটি পরীক্ষা করি এবং এটি কাজ করে - আমি জানি না কেন - তাই ঠিক আছে :) - আমি আমার আগের মন্তব্যটি মুছে
— ফেলছি
6
2017 পর্যন্ত এটি আমার কাছে সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত।
— জোয়ান
@ জোয়ান এটি সিদ্ধান্ত নেওয়ার জন্য মূল পোস্টার
— অবধি
মার্জিনের উপস্থিতিতে কাজ করে না। document.documentElement.getBoundingClientRect()আরও ভাল কাজ করে
— টর্ভিন
3
এটির সাথে একটি ত্রুটি রয়েছে: উদাহরণস্বরূপ বলুন যে এটির ডিফল্ট মার্জিনের <h1>শুরুতে একটি উপাদান রয়েছে <body>, এটি <body>সনাক্ত করার কোনও উপায় ছাড়াই এটি উপাদানটিকে নীচে ঠেলে দেবে । document.documentElement.scrollHeight(না document.body,scrollHeight) হ'ল জিনিসগুলির সর্বাধিক সঠিক উপায়। এটি শরীরের মার্জিন এবং স্টাফের মার্জিন উভয় দিয়েই এটি শরীরের অভ্যন্তরে এনে দেয় works
— ইথান
29

আপনি এটি ব্যবহার করতে পারেন:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

বা আরও jQuery উপায়ে (যেহেতু আপনি বলেছিলেন jQuery মিথ্যা বলে না) :)

Math.max($(document).height(), $(window).height())
— মিমো
সূত্র
24

সম্পূর্ণ নথির উচ্চতার গণনা:

আরও সাধারণ হয়ে উঠতে এবং যে কোনও নথির উচ্চতা সন্ধান করার জন্য আপনি কেবলমাত্র সরল পুনরাবৃত্তি সহ বর্তমান পৃষ্ঠায় সর্বাধিক ডোম নোড খুঁজে পেতে পারেন:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

আপনি এটি আপনার নমুনা সাইটগুলিতে ( http://fandango.com/ বা http://paperbackswap.com/ ) একটি ডিভুলস কনসোলে এই স্ক্রিপ্টটি আটকানোর মাধ্যমে পরীক্ষা করতে পারেন ।

দ্রষ্টব্য: এটি নিয়ে কাজ করছে Iframes।

উপভোগ করুন!

— আন্ড্রি ভার্বিৎস্কি
সূত্র
2
এটা চমত্কার ভাবে কাজ করেছে! এখানে অন্য কোনও উত্তর পুরো উচ্চতা (স্ক্রোলযোগ্য অঞ্চল সহ) পাওয়ার জন্য কাজ করে না, তারা সকলেই দৃশ্যমান ক্ষেত্রের উচ্চতা ফিরে আসে।
— মার্টিন ক্রিস্টিয়ানসন
সত্যিই ব্যতিক্রমী, এটি কখনই ভাবেননি। আমি মনে করি একমাত্র ফ্যান্টমজে কাজ করছি।
— মাইন্ডলেস রেঞ্জার
6

ডকুমেন্টের আকার নির্ধারণের "jQuery পদ্ধতি" - সবকিছুকে জিজ্ঞাসা করুন, সর্বাধিক মূল্য গ্রহণ করুন এবং সেরাের জন্য আশা করুন - বেশিরভাগ ক্ষেত্রেই কাজ করে তবে তাদের সবকটিতে নয় ।

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

পারফরম্যান্সে এই এককালীন পরীক্ষার প্রভাব ন্যূনতম , এবং প্লাগইন এমনকি অদ্ভুত পরিস্থিতিতেও সঠিক ফলাফল দেয় - আমি বলি কারণ এটি নয়, তবে একটি বিশাল, স্বয়ংক্রিয়ভাবে উত্পন্ন পরীক্ষার স্যুট এটি যাচাই করে যাচাই করে।

যেহেতু প্লাগইনটি ভ্যানিলা জাভাস্ক্রিপ্টে লেখা হয়েছে, আপনি এটি jQuery ছাড়াইও ব্যবহার করতে পারেন ।

— hashchange
সূত্র
5

আমি মিথ্যা বলেছি, jQuery উভয় পৃষ্ঠার জন্য সঠিক মান ফেরত দিয়েছে document (নথি)। উচ্চতা (); ... কেন আমি কখনও সন্দেহ করলাম না?

— নিকের
সূত্র
1
বিভিন্ন ব্রাউজার ব্র।
— জহরিচি
4

2017 এর সঠিক উত্তরটি হ'ল:

document.documentElement.getBoundingClientRect().height

document.body.scrollHeightএই পদ্ধতির বিপরীতে শরীরের মার্জিনগুলির জন্য অ্যাকাউন্ট। এটি ভগ্নাংশের উচ্চতার মানও দেয় যা কিছু ক্ষেত্রে কার্যকর হতে পারে

— torvin
সূত্র
1
এই পৃষ্ঠায় আপনার পদ্ধতিটি চেষ্টা করার পরে আমি এগুলি পেয়েছি ফলাফলগুলি: i.imgur.com/0psVkIk.png আপনার পদ্ধতিটি এমন কিছু দেয় যা উইন্ডো উচ্চতার মতো দেখায়, যখন document.body.scrollHeightপুরো স্ক্রোলযোগ্য উচ্চতার তালিকা দেয়, যা মূল প্রশ্নটি জিজ্ঞাসা করেছিল।
— মারকুইজো
2
@ মারকুইজো যেহেতু এই পৃষ্ঠায় html { height: 100% }সিএসএস রয়েছে। সুতরাং এপিআই সঠিকভাবে আসল গণনা করা উচ্চতা দেয়। এই শৈলীটি সরানোর চেষ্টা করুন এবং এতে মার্জিন যুক্ত করার চেষ্টা করুন এবং bodyব্যবহার করতে সমস্যা হচ্ছে তা আপনি দেখতে পাবেন document.body.scrollHeight।
— টরভিন
এটির সাথে একটি ত্রুটি রয়েছে: উদাহরণস্বরূপ বলুন যে এটির ডিফল্ট মার্জিনের <h1>শুরুতে একটি উপাদান রয়েছে <body>, এটি <body>সনাক্ত করার কোনও উপায় ছাড়াই এটি উপাদানটিকে নীচে ঠেলে দেবে । document.documentElement.scrollHeight(না document.body,scrollHeight) হ'ল জিনিসগুলির সর্বাধিক সঠিক উপায়।
— ইথান
আপনারা কী বলছেন তা নিশ্চিত নয় documentElement.scrollHeightএই ক্ষেত্রে একটি ভুল মান দেয়। documentElement.getBoundingClientRect().heightসঠিক দেয়। এটি দেখুন: jsfiddle.net/fLpqjsxd
— টরভিন
1
@ টেরভিন ফ্যাক্ট এখনও অবধি রয়েছেন যে উদ্দেশ্যে করা ফলাফলটি ফেরত আসে না getBoundingClientRect().height। এটি sidetracked হয়, যখন 3 (তিন) অন্যান্য পদ্ধতি sidetracked হয় না। আপনি একে নিকৃষ্ট হিসাবে উল্লেখ করেছেন এমন একটি সহ। এবং আপনি এই পৃষ্ঠার এইচটিএমএল উচ্চতা থেকে 100% মুছে ফেলার পরামর্শ দিয়ে এবং এটিতে মার্জিন যোগ করার মাধ্যমে এটি করার জন্য জোর দিচ্ছেন। আলোচ্য বিষয়টি কি ? এটি কেবল getBoundingClientRect().heightবুলেট-প্রুফ নয় accept
— রব ওয়া
2

একটি ক্রস ব্রাউজারে / ডিভাইস উপায় ব্যবহার করে প্রস্থ পেতে:

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}
— user937284
সূত্র
11
আমরা উচ্চতার কথা বলছি প্রস্থ নয়।
— যশ 20 ই
0

বৈশিষ্ট্য সনাক্তকরণ ব্যবহার করে যে কোনও দাবিতে কোনও পৃষ্ঠা স্ক্রোল করতে সমস্যা হচ্ছে তার জন্য, আমি কোনও অ্যানিমেটেড স্ক্রোলটিতে কোন বৈশিষ্ট্যটি ব্যবহার করতে হবে তা সনাক্ত করতে আমি এই হ্যাকটি নিয়ে এসেছি।

সমস্যাটি উভয়ই ছিল document.body.scrollTopএবং document.documentElementসর্বদা trueসমস্ত ব্রাউজারে ফিরে আসে ।

তবে আপনি কেবল একটি বা অন্যটি দিয়ে কেবল কোনও দস্তাবেজ স্ক্রোল করতে পারেন। ডাব্লু 3 স্কুল অনুসারে d.body.scrollTopসাফারি এবং document.documentElementঅন্য সকলের জন্য (উদাহরণ দেখুন)

element.scrollTop সমস্ত ব্রাউজারে কাজ করে, নথির স্তরের জন্য এটি নয়।

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }
— YK থেকে
সূত্র
-1

গণনা উচ্চতা + স্ক্রোল জন্য ব্লক কোড ব্যবহার করুন

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";
— আলি বাঘেরি
সূত্র
-1

নীচের এই ক্রস ব্রাউজার কোডটি শরীরের সমস্ত সম্ভাব্য উচ্চতা এবং এইচটিএমএল উপাদানগুলির মূল্যায়ন করে এবং সর্বাধিক প্রাপ্ত সন্ধান করে:

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

একটি কার্যকরী উদাহরণ:

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();
body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}
<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
স্নিপেট প্রসারিত করুন

— উইলি উইঙ্কা
সূত্র
ডাউনভোটিংয়ের ক্ষেত্রে অনুপ্রেরণাটি ব্যাখ্যা করুন যাতে আমি বিষয়টিকে সংশোধন করতে পারি। অনেক অনেক ধন্যবাদ
— উইল উইনকা
-4

আমি এখনই উচ্চতা নির্ধারণ সম্পর্কে জানি না, তবে আপনি নীচে কিছু রাখার জন্য এটি ব্যবহার করতে পারেন:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>
— jedihawk
সূত্র
1
আমাকে বিশ্বাস করুন, আমি এটিতে এইচটিএমএল এবং সিএসএস সংস্থানগুলি শেষ করেছি। এটি ব্যাখ্যা করতে পারে না তবে আপনি যদি সেই সাইটগুলিতে এটি ব্যবহার করে থাকেন তবে আপনি সমস্যাগুলি দেখতে পাবেন।
— নিক
-4

উল্লেখগুলি যথাযথভাবে যুক্ত করুন

আমার ক্ষেত্রে আমি একটি এএসসিএক্স পৃষ্ঠা ব্যবহার করছিলাম এবং এসপেক্স পৃষ্ঠায় যেটি এসএসএক্স নিয়ন্ত্রণ রয়েছে তা সঠিকভাবে উল্লেখগুলি ব্যবহার করছে না। আমি সবেমাত্র নিম্নলিখিত কোডটি পেস্ট করেছি এবং এটি কার্যকর হয়েছে:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>
— বাজে কথা
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.