จะเพิ่มอะไรใน <head> ผ่าน jquery / javascript ได้อย่างไร?

103

ฉันกำลังทำงานกับ CMS ซึ่งป้องกันการแก้ไขซอร์ส HTML สำหรับ<head>องค์ประกอบ

ตัวอย่างเช่นฉันต้องการเพิ่มสิ่งต่อไปนี้เหนือ<title>แท็ก:

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

— Jitendra Vyas
แหล่งที่มา

8

สิ่งนี้ไม่ได้มีเหตุผล ... หัวจะถูกแยกวิเคราะห์ก่อนที่จะเรียกใช้จาวาสคริปต์ การเพิ่ม meta stuf ไปที่ head ผ่าน javascript จะไม่ได้ผลตามที่ต้องการ

— Andre Haverdings

1

@ มิกเคล - ครับ คำตอบของคำถามทั้งหมดช่วยฉันได้

— Jitendra Vyas

2

แม้ว่าจะไม่เกี่ยวข้องกับคำถาม CMS แต่คุณควรเพิ่มเมตาแท็กในบางสถานการณ์ มี addons ของเบราว์เซอร์และการแทรกจาวาสคริปต์ที่ใช้ข้อมูลที่อยู่ในเมตาแท็กเพื่อรวบรวมข้อมูล OpenGraph ของ Facebook เป็นตัวอย่างหนึ่ง จำเป็นต้องใส่เมตาแท็กลงในส่วนหัวเมื่อคุณไม่มีสิทธิ์เข้าถึงโดยตรงไปยัง HTML ต้นทางไม่ว่าจะด้วยความผิดพลาดของ CMS หรือเนื่องจากคุณกำลังเขียน javascript addon / injection ด้วยตัวเอง

— conceptDawg

โปรดทราบว่าการเพิ่ม<meta>แท็กแบบไดนามิกจะไม่มีผลใด ๆ ขึ้นอยู่กับสิ่งที่เป็นและเบราว์เซอร์ที่เกี่ยวข้อง

— Pointy

จุดดีนั่นคือสิ่งที่จะเกิดขึ้นเมื่อเรามุ่งเน้นไปที่ปัญหามากเกินไป ;-)

— mb897038

149

คุณสามารถเลือกและเพิ่มได้ตามปกติ:

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

— nickf
แหล่งที่มา

2

ฉันจะควบคุมคำสั่งได้อย่างไรที่จะวางลิงก์นี้

— Jitendra Vyas

7

อ่านเอกสาร: docs.jquery.com/Manipulation insertBefore , insertAfterคือสิ่งที่คุณต้องการ

— nickf

3

ฉันใส่เอกสารนี้ไว้แล้ว แต่มันไม่ได้ต่อท้ายเนื้อหาส่วนหัวของฉัน

— งู 403

กำลังเพิ่มลิงค์ แต่ลิงค์ไม่แสดงในมุมมองของเพจ Source ... ฉันสามารถดูได้จากเครื่องมือพัฒนาเบราว์เซอร์เช่น Firebug ฉันสามารถดูลิงค์ในมุมมองแหล่งที่มาได้หรือไม่

— พันกาจติวารี

4

@PankajTiwari คุณจะไม่เห็นในมุมมองซอร์สเนื่องจากโค้ดต่อท้ายเอกสารปัจจุบันไม่ใช่ซอร์สดั้งเดิม (ซึ่งเซิร์ฟเวอร์ให้มา) นั่นเป็นเหตุผลที่เครื่องมือ FireBug และ Chrome Dev จึงมีประโยชน์มาก

— Bernhard Hofmann

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

ทำงานร่วมกับองค์ประกอบของสคริปต์!

— Ray Foss

26

jQuery

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

JavaScript:

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

— เดวิดเฮดลันด์
แหล่งที่มา

5

เด็กต้องการองค์ประกอบ DOM หรือไม่? กล่าวคือ. var elem = document.createElement () document.getElementsByTagName ('head') [0] .appendChild (elem);

— fredrik

2

ใช่ ฉันเพิ่งออกจากส่วนนั้น...เพราะฉันไม่รู้สึกว่านั่นเป็นส่วนสำคัญของคำถามและในขณะที่เขียนก็ไม่มีตัวอย่างให้เห็นว่าเขาต้องการใส่อะไรในหัว แต่ใช่มันจำเป็นต้องเป็นองค์ประกอบ DOM

— David Hedlund

10

คุณสามารถใช้innerHTMLเพียงแค่ต่อสตริงเขตข้อมูลพิเศษ

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

อย่างไรก็ตามคุณไม่สามารถรับประกันได้ว่าเบราว์เซอร์จะจดจำสิ่งพิเศษที่คุณเพิ่มลงในส่วนหัวหลังจากการโหลดครั้งแรกและเป็นไปได้ว่าคุณจะได้รับ FOUC (แฟลชของเนื้อหาที่ไม่มีการเรียงซ้อน) เมื่อโหลดสไตล์ชีตเพิ่มเติม

ฉันไม่ได้ดู API มาหลายปีแล้ว แต่คุณยังสามารถใช้ได้document.writeซึ่งเป็นสิ่งที่ออกแบบมาสำหรับการกระทำประเภทนี้ อย่างไรก็ตามสิ่งนี้จะทำให้คุณต้องบล็อกหน้าไม่ให้แสดงผลจนกว่าคำขอ AJAX เริ่มต้นของคุณจะเสร็จสมบูรณ์

— Jivings
แหล่งที่มา

9

ในเบราว์เซอร์ล่าสุด (IE9 +) คุณยังสามารถใช้document.head :

ตัวอย่าง:

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);

— Benny Neugebauer
แหล่งที่มา

9

สร้างองค์ประกอบชั่วคราว (e. g. 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องค์ประกอบ แต่อย่างใด

โปรดทราบว่าสคริปต์ที่แทรกด้วยวิธีนี้ดูเหมือนจะไม่ถูกดำเนินการโดยอัตโนมัติในขณะที่ใช้สไตล์สำเร็จ ดังนั้นหากคุณต้องการเรียกใช้สคริปต์คุณควรโหลดไฟล์ JS โดยใช้Ajaxจากนั้นเรียกใช้เนื้อหาโดยใช้ไฟล์eval().

— มารตานลิน
แหล่งที่มา

นั่นคือวิธีที่ฉันทำในแท็bodyก แต่สามารถทำได้จริงในhead-tag หรือไม่? ผมอยู่ภายใต้การแสดงผลที่แท็กได้รับอนุญาตเท่านั้นที่base, link, meta, title, styleและscript?

— mb897038

AFAICT คุณมีองค์ประกอบเหล่านั้นในการตอบสนอง Ajax ของคุณ คุณไม่?

— Marat Tanalin

อันที่จริง แต่ฉันยังไม่สามารถทำให้มันทำงานกับ div ภายในแท็กหัวได้ ดูเหมือนว่า Chrome จะ "ฉลาด" พอที่จะแสดงเนื้อหาของ div ในเนื้อหาได้อยู่แล้ว

— mb897038

2

คุณอาจไม่ได้อ่านคำตอบอย่างละเอียด ;-) DIVองค์ประกอบเป็นเพียงภาชนะชั่วคราวสำหรับวัตถุประสงค์ของการแยกโค้ด HTML คุณไม่ควรแทรกDIVตัวเองลงในไฟล์HEAD. คุณควรใส่ของโหนดลูก โปรดดูตัวอย่างที่ฉันได้เพิ่มไว้ในคำตอบ

— Marat Tanalin

1

@GaetanL. “ ในขณะที่มีองค์ประกอบย่อยอยู่ภายในtempองค์ประกอบ” ดูเอกสารNode.firstChild ()

— Marat Tanalin

4

ลองใช้จาวาสคริปต์บริสุทธิ์:

ไลบรารี JS:

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() + '...');

อย่างไรก็ตามมันใช้งานได้ ตัวเลือก JavaScript ที่คนอื่นพูดก็ถูกต้องเช่นกัน

— เดฟ
แหล่งที่มา

2

ซึ่งจะลบเนื้อหาที่มีอยู่และสร้างองค์ประกอบใหม่ ซึ่งอาจมีผลข้างเคียงที่ไม่พึงปรารถนาเช่นการสูญเสียคุณสมบัติ DOM ที่ตั้งค่าแบบไดนามิกและทำให้สคริปต์ถูกเรียกใช้งานอีกครั้ง

— Quentin

ด้วยเหตุนี้คุณควรใช้ก่อน $ ('head'). html () เพื่อกู้คืนคุณสมบัติ DOM ทั้งหมด

— Dave

1

การใช้.html()จะไม่สามารถกู้คืนทุกคุณสมบัติ DOM (กรณีที่พบบ่อยที่สุดของปัญหานี้และที่เห็นได้ชัดเจนที่สุดคือเมื่อใช้โค้ดที่คล้ายกันเพื่อเพิ่มฟิลด์ใหม่ลงในฟอร์มแอตทริบิวต์ค่าแสดงถึงค่าเริ่มต้นของฟิลด์ดังนั้นการรับhtml()และตั้งค่ากลับจะรีเซ็ตที่มีอยู่ทั้งหมด ฟิลด์เป็นค่าเริ่มต้น)

— Quentin

ฉันมั่นใจว่าคุณได้ทดสอบในโค้ดของฉันและมันใช้งานได้และคุณสมบัติ DOM ทั้งหมดทำงานได้ โปรดทดสอบตัวเองฉันใช้งาน IE11

— Dave

สิ่งที่อาจถูกลบออกไปก็คือเหตุการณ์เช่นกัน

— Hydroper