2012-04-10 38 views
9

Tôi có một cái gì đó giống như vậy:Thay đổi iframe với jquery

 <iframe id="frame" width="200" height="150" 
    src="http://www.youtube.com/embed/GiZGEFBGgKU?rel=0& 
amp&iv_load_policy=3;autoplay=1" frameborder="0" allowfullscreen></iframe> 

Và tôi muốn thay đổi chiều rộng và chiều cao sử dụng jquery tôi cố gắng:

$("#frame").setAttribute("width", "50"); 
$("iframe").setAttribute("width", "31"); 

Không ai trong số họ làm việc

Trả lời

24

Như Sarfraz đã chỉ ra, cách chính xác để đặt thuộc tính cho đối tượng bộ chọn jquery là sử dụng attr("attrName", "attrVal"). Lý do mà setAttribute không hoạt động là điều đáng để giải thích, vì tôi đã đánh đầu vào điểm này nhiều lần:

Khi bạn sử dụng cú pháp chọn của jquery, nó trả về một đối tượng - được định nghĩa trong jquery - - về cơ bản là danh sách tất cả các yếu tố mà bộ chọn phù hợp. Cho dù nó khớp với một phần tử (luôn luôn là trường hợp với bộ chọn id) hay nhiều hơn một đối tượng trả về là danh sách phần tử, không bao giờ là một đối tượng DOM đơn lẻ (ví dụ như phần tử đơn). setAttribute là một phương pháp cho các đối tượng thực tế HTMLElement.

Đây là lý do tại sao

$("#frame")[0].setAttribute("width", "200"); 

công trình, nhưng

$("#frame").setAttribute("width", "200"); 

không. Phần tử jquery không có phương thức đó, mặc dù các đối tượng HTMLElement trong danh sách của nó.

Nếu bạn muốn (vì lý do gì) sử dụng một HTMLElement phương pháp tự nhiên (hoặc một phương pháp phổ biến đến các yếu tố lợi nhuận chọn của bạn, chẳng hạn như đầu vào, vv), bạn có thể sử dụng phương pháp jquery của each(), như vậy:

// Set all iframes to width of 250 
$("iframe").each(
    function(index, elem) { 
     elem.setAttribute("width","250"); 
    } 
); 

Gọi lại của phương thức each() có thể được chuyển qua hai tham số tùy chọn, đầu tiên là chỉ mục của phần tử trong danh sách chọn, thứ hai là phần tử DOM thực tế mà bạn có thể gọi phương thức DOM gốc. Như tôi đã nói, tôi đã thực sự thất vọng khi cố gắng tìm cách sử dụng kết quả bộ chọn của jquery với các phương thức gốc nhiều lần, vì vậy tôi hy vọng điều này sẽ giúp làm sáng tỏ không chỉ lý do tại sao setAttribute() không hoạt động. nói chung và cách thực sự khiến chúng hoạt động khi bạn không thể tìm thấy tương đương jquery.

+0

+1 để được giải thích chi tiết :) – Sarfraz

+1

+1 để biết thông tin chi tiết^^ – Ben

2

1) Sử dụng attr:

$("#frame").attr("width", "31"); 

2) Sử dụng đối tượng DOM:

$("#frame")[0].setAttribute("width", "50"); 
+0

Prop() dosent work – Ben

+1

Không phải là 'chiều rộng' một thuộc tính thay vì một thuộc tính? Tôi có thể sai nhưng tôi khá chắc chắn bạn nên sử dụng 'attr()' ... – elclanrs

+0

@Even - Bạn có chắc chắn nó không điều chỉnh nhưng nội dung Youtube chỉ là cố định kích thước? – jmort253

3

gì về:

$('#frame').width(x) 

hoặc

$('#frame').attr("width","50"); 
+0

+1 trên attr! Tôi không muốn thêm như của riêng tôi vì vậy tôi đã thêm nó vào của bạn. – jmort253

0

Edit: Saw bạn có id. Bạn có thể xem liệu mã có thực sự chạy không? Giống như là nó đang được kích hoạt? Ngoài ra, hãy thử thay đổi allowfullscreen thành allowfullscreen="true"

0
$(document).ready(function() { 
var ysr = $('iframe').attr('src'); 
var nysr = ysr + "HD=1;rel=0;showinfo=0"; 
$('iframe').attr('src', nysr);}); 
Các vấn đề liên quan