কীভাবে জেকোরি / জাভাস্ক্রিপ্টের মাধ্যমে <হেড> তে কিছু যুক্ত করবেন?

102

আমি একটি সিএমএস নিয়ে কাজ করছি, যা <head>উপাদানটির জন্য HTML উত্স সম্পাদনা রোধ করে editing

উদাহরণস্বরূপ আমি <title>ট্যাগের উপরে নিম্নলিখিতগুলি যুক্ত করতে চাই :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

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

8

এটি বোধগম্য হয় না ... জাভাস্ক্রিপ্ট কার্যকর করার পূর্বে মাথা পার্স করা হয়েছে। জাভাস্ক্রিপ্টের মাধ্যমে মাথায় মেটা স্টুফ যুক্ত করা পছন্দসই প্রভাব ফেলবে না।

— আন্দ্রে হ্যাভারডিংস

1

@ মিকেল - হ্যাঁ সমস্ত প্রশ্নের উত্তর আমাকে সহায়তা করে

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

2

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

— ধারণাগুলি

নোট করুন যে এটি সম্ভব যে <meta>ট্যাগগুলি গতিশীলভাবে যুক্ত করা তার কোনও প্রভাব ফেলবে না, তার উপর নির্ভর করে তারা কী এবং ব্রাউজার কী জড়িত।

— পয়েন্টি

ভাল কথা, যখন কেউ সমস্যার দিকে খুব বেশি মনোনিবেশ করেন তখনই তা ঘটে; ;)

— mb897038

149

আপনি এটি নির্বাচন করতে এবং এটিকে স্বাভাবিক হিসাবে যুক্ত করতে পারেন:

$('head').append('<link />');

— nickf
সূত্র

2

আমি কীভাবে অর্ডার নিয়ন্ত্রণ করতে পারি, যেখানে এই লিঙ্কটি স্থাপন করা হবে

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

7

ডকুমেন্টেশন পড়ুন: docs.jquery.com/ ম্যানিপুলেশন insertBefore , insertAfterআপনি চান তা।

— নিকফ

3

আমি document.ready এই করা আছে, কিন্তু এটা আমার মাথা বিষয়বস্তু লিখবেন না

— serpent403

এটি লিঙ্কটি যুক্ত করছে, তবে লিঙ্কটি পৃষ্ঠার দৃশ্যে প্রদর্শিত হচ্ছে না উত্স ... আমি ফায়ারব্যাগের মতো ব্রাউজার বিকাশ সরঞ্জামগুলি থেকে এটি দেখতে পারি। আমি কি উত্স উত্স লিঙ্ক দেখতে পারেন?

— পঙ্কজ তিওয়ারি

4

@ পঙ্কজটিওয়ারি আপনি এটি উত্স ভিউতে দেখতে পাবেন না কারণ কোডটি এটি বর্তমান নথিতে সংযুক্ত করে, মূল উত্স নয় (যা সার্ভার দ্বারা সরবরাহ করা হয়েছিল)। এজন্য ফায়ারব্যাগ এবং ক্রোম ডে সরঞ্জামগুলি এত কার্যকর।

— বার্নহার্ড হোফম্যান

129

javascript:

document.getElementsByTagName('head')[0].appendChild( ... );

DOM উপাদানটি এর মতো করুন:

link=document.createElement('link');
link.href='href';
link.rel='rel';

document.getElementsByTagName('head')[0].appendChild(link);

— জোশুয়া উডওয়ার্ড
সূত্র

1

স্ক্রিপ্ট উপাদানগুলির সাথে কাজ করে!

— রায় ফস

26

jQuery এর

$('head').append( ... );

javascript:

document.getElementsByTagName('head')[0].appendChild( ... );

— ডেভিড হেডলুন্ড
সূত্র

5

doendChild এর জন্য কোনও DOM- উপাদান প্রয়োজন নেই? অর্থাত। var ইলেম = ডকুমেন্ট.ক্রেটএলিমেন্ট () ডকুমেন্ট.জেট এলিমেন্টস বাই টাইগনাম ('হেড') [0] .এপেন্ডচিল্ড (এলেম);

— ফ্রেডরিক

2

হ্যাঁ ঠিক. আমি কেবল সেই অংশটি ছেড়ে দিয়েছি ...কারণ আমি মনে করি না যে এটি প্রশ্নের একটি কেন্দ্রীয় অংশ ছিল এবং লেখার সময়ও তিনি কী মাথায় রাখতে চেয়েছিলেন সে সম্পর্কে কোনও হস্তক্ষেপ হয়নি। তবে হ্যাঁ, এটি একটি ডোম-উপাদান হতে হবে।

— ডেভিড হেডলন্ড

10

আপনি innerHTMLঅতিরিক্ত ক্ষেত্রের স্ট্রিংটি কেবল সংক্ষেপে ব্যবহার করতে পারেন ;

document.head.innerHTML = document.head.innerHTML + '<link rel="stylesheet>...'

যাইহোক, আপনি গ্যারান্টি দিতে পারবেন না যে আপনি মাথার সাথে যুক্ত করা অতিরিক্ত জিনিসগুলি প্রথম লোডের পরে ব্রাউজার দ্বারা স্বীকৃত হবে এবং অতিরিক্ত স্টাইলশিট লোড হওয়ার সাথে সাথে আপনি একটি FOUC (আনস্টাইলযুক্ত সামগ্রীর ফ্ল্যাশ) পাবেন get

আমি কয়েক বছরে এপিআইয়ের দিকে নজর দিইনি, তবে আপনি এটিও ব্যবহার করতে পারেন document.writeযা এই ধরণের ক্রিয়াটির জন্য ডিজাইন করা হয়েছিল। তবে এটির জন্য আপনার প্রাথমিক এজেএক্স অনুরোধটি শেষ না হওয়া পর্যন্ত আপনাকে পৃষ্ঠাটি রেন্ডারিং থেকে ব্লক করা দরকার।

— Jivings
সূত্র

9

সর্বশেষতম ব্রাউজারগুলিতে (আই 9 +) আপনি ডকুমেন্ট.হেডও ব্যবহার করতে পারেন :

উদাহরণ:

var favicon = document.createElement('link');
favicon.id = 'myFavicon';
favicon.rel = 'shortcut icon';
favicon.href = 'http://www.test.com/my-favicon.ico';

document.head.appendChild(favicon);

— বেনি নিউজবাউয়ার
সূত্র

9

একটি অস্থায়ী উপাদান (ঙ। ছ। তৈরি করুন DIV), তার আপনার HTML কোড নির্ধারণ innerHTMLসম্পত্তি, এবং তারপর তার সংযোজন শিশু নোড থেকে HEADএকের পর উপাদান এক। উদাহরণস্বরূপ, এটি পছন্দ করুন:

var temp = document.createElement('div');

temp.innerHTML = '<link rel="stylesheet" href="example.css" />'
               + '<script src="foobar.js"><\/script> ';

var head = document.head;

while (temp.firstChild) {
    head.appendChild(temp.firstChild);
}

এর HEADমাধ্যমে সম্পূর্ণ সামগ্রীর পুনর্লিখনের সাথে তুলনা করা, এটি কোনওভাবেই উপাদানটির innerHTMLবিদ্যমান শিশু উপাদানগুলিকে প্রভাবিত করবে না HEAD।

নোট করুন যে wayোকানো স্ক্রিপ্টগুলি দৃশ্যত স্বয়ংক্রিয়ভাবে কার্যকর হয় না, যখন শৈলীগুলি সফলভাবে প্রয়োগ করা হয়। সুতরাং যদি আপনার সম্পাদনের জন্য স্ক্রিপ্টগুলির প্রয়োজন হয় তবে আপনাকে জেএস ফাইলগুলি অ্যাজাক্স ব্যবহার করে লোড করা উচিত এবং তারপরে তাদের সামগ্রীগুলি ব্যবহার করে চালানো উচিত eval()।

— মারাত তানালিন
সূত্র

এইভাবে আমি এটি এটি bodyকরতে পারি, তবে কী তা- headট্যাগের ভিতরেই করা যেতে পারে ? আমি এইরকম যে কেবল অনুমোদিত ট্যাগ যেখানে অধীন ছিল base, link, meta, title, styleএবং script?

— mb897038

আফিক্স, আপনার অ্যাজাক্স প্রতিক্রিয়াতে ঠিক সেই উপাদানগুলি রয়েছে। আপনি না?

— মারাত তানালিন

আসলে, তবে আমি এখনও এটি হেড ট্যাগের ভিতরে একটি ডিভ দিয়ে কাজ করতে পারি না। দেখে মনে হচ্ছে ক্রোম "স্মার্ট" যথেষ্ট পরিমাণে শরীরে ডিভের সামগ্রী প্রদর্শন করতে পারে to

— mb897038

2

আপনি সম্ভবত উত্তরটি মনোযোগ সহকারে পড়েন নি। ;-) এইচটিএমএল কোড পার্সDIV করার উদ্দেশ্যে উপাদানটি একটি অস্থায়ী ধারক । আপনার নিজের মধ্যে এটি sert োকানো উচিত নয় । আপনার সন্তানের নোডগুলি inোকানো উচিত । আমি উত্তরে উদাহরণ যোগ করেছি দয়া করে দেখুন। DIVHEAD

— মারাত তানালিন

1

@GaetanL। "যখন উপাদানটির ভিতরে শিশু উপাদান রয়েছে temp” " দেখুন Node.firstChild () দস্তাবেজ।

— মারাত তানালিন

4

খালি জাভাস্ক্রিপ্ট চেষ্টা করুন:

গ্রন্থাগার জেএস:

appendHtml = function(element, html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    while (div.children.length > 0) {
        element.appendChild(div.children[0]);
    }
}

টাইপ করুন: appendHtml(document.head, '<link rel="stylesheet" type="text/css" href="http://example.com/example.css"/>');

বা jQuery:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'http://example.com/example.css'));

— KingRider
সূত্র

-5

Jquery সহ আপনার অন্যান্য বিকল্প রয়েছে:

$('head').html($('head').html() + '...');

যাইহোক এটি কাজ করছে। অন্যরা জাভাস্ক্রিপ্ট বিকল্পটি বলেছে, এটিও সঠিক।

— ডেভ
সূত্র

2

এটি বিদ্যমান সামগ্রী মুছবে এবং নতুন উপাদান তৈরি করবে। এর অবাঞ্ছিত পার্শ্ব প্রতিক্রিয়া থাকতে পারে যেমন ডায়নামিকভাবে সেট ডম বৈশিষ্ট্যগুলি হারাতে এবং স্ক্রিপ্টগুলি পুনরায় কার্যকর করা হয়।

— কোয়ান্টিন

এই কারণে আপনার সমস্ত DOM বৈশিষ্ট্য পুনরুদ্ধার করতে should ('মাথা') আগে html () ব্যবহার করা উচিত

— ডেভ

1

ব্যবহার করা সমস্ত ডিওএম বৈশিষ্ট্য .html()পুনরুদ্ধার করবে না । (এই সমস্যার সর্বাধিক সাধারণ উদাহরণ এবং সর্বাধিক দৃশ্যমান, হ'ল কোনও ফর্মে নতুন ক্ষেত্র যুক্ত করতে অনুরূপ কোড ব্যবহার করার সময় value মান বৈশিষ্ট্যটি কোনও ক্ষেত্রের ডিফল্ট মানকে উপস্থাপন করে, তাই এটি পাওয়া এবং এটি পুনরায় সেট করা সমস্ত বিদ্যমান পুনরায় সেট করে দেবে তাদের ডিফল্ট মানগুলিতে ক্ষেত্রগুলি)। html()

— কোয়ান্টিন

আমি নিশ্চিত করতে পারি যে আপনি এটি আমার কোডে পরীক্ষা করে দেখেছেন এবং এটি কাজ করছে এবং সমস্ত ডিওএম বৈশিষ্ট্য কাজ করে। দয়া করে নিজেকে পরীক্ষা করুন, আমি আইই 11

— ডেভ

যে জিনিসগুলি সরানো হতে পারে সেগুলি হ'ল ইভেন্টগুলি events

— হাইড্রোপার