2011-09-26 44 views
61

Tôi có một trang chính (thực sự là một JSP) với một iframe bên trong nó như;jQuery Force đặt thuộc tính src cho iframe

<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe> 

Bây giờ có rất nhiều liên kết trên trang chính (render động qua JSP) mà có thể cố gắng thiết lập src một số URL ...

Bây giờ câu hỏi của tôi là, sử dụng jQuery (có thể sống()), tôi có thể ghi đè điều đó theo cách mà thuộc tính "src" cho abc_frame sẽ luôn có một số giá trị cụ thể (ví dụ: "somefixedURL")

Tôi không thể chụp liên kết, vì nó được tạo hoàn toàn tự động qua một số mã Java và do đó tôi đang cố gắng ghi đè lên iframe src?

Trả lời

128

Sử dụng attr

$('#abc_frame').attr('src', url) 

Bằng cách này bạn có thể nhận và thiết lập tất cả các thuộc tính tag HTML. Lưu ý rằng cũng có .prop(). Xem .prop() vs .attr() về sự khác biệt. Phiên bản ngắn: .attr() được sử dụng cho các thuộc tính khi chúng được viết bằng mã nguồn HTML và .prop() là dành cho tất cả JavaScript được đính kèm với phần tử DOM.

+0

Lý do điều này sẽ không hoạt động sau khi trang đã được tải, một liên kết khác sẽ thay đổi src thành giá trị mới ... – testndtv

+0

Nếu bạn pleace mã ở phần cuối của tập tin bạn mã sẽ được thực hiện sau khi các kịch bản khác. Nếu sự cố của bạn được tạo bởi một liên kết cụ thể mà người dùng nhấp vào, bạn có thể thêm sự kiện onclick thứ hai vào liên kết. Nếu không, bạn phải sử dụng setTimout/setInterval và lặp lại kiểm tra giá trị của src (xấu xí!). – PiTheNumber

5
$(document).ready(function() { 
    $('#abc_frame').attr('src',url); 
}) 
1

Bạn không thể đặt FIX iframe's src hoặc ngăn javascript/form submit thay đổi vị trí của nó. Tuy nhiên, bạn có thể đặt tập lệnh vào tải của trang và thay đổi hành động của từng liên kết động.

17

nếu bạn đang sử dụng jQuery 1.6 trở lên, bạn muốn sử dụng .prop() hơn .attr():

$('#abc_frame').prop('src', url) 

Xem this question cho một lời giải thích những sự khác biệt.

+3

Liên kết thú vị nhưng xin lưu ý rằng câu trả lời đã được cập nhật vì hành vi jQuery _reverted_ 'attr()'. Nói chung tôi sẽ không đồng ý về việc sử dụng '.prop()' ở đây vì 'src' là một thuộc tính không phải là một thuộc tính làm tài liệu API cho' .prop() 'mà bạn đã liên kết giải thích. – PiTheNumber

8

Trong khi tạo liên kết đặt mục tiêu thành thuộc tính tên iframe và bạn có thể sẽ không phải đối phó với jquery chút nào.

<a href="inventory.aspx" target="contentframe" title="Title Inventory"> 
<iframe id="iframe1" name="contentframe" ></iframe> 
+0

Ý tưởng tốt để sử dụng phương pháp gốc của trình duyệt khi có thể, nhưng tôi nghĩ rằng người dùng có liên kết động nên cần phải nắm bắt trình quản lý nhấp chuột. – efwjames

+0

Động lực? Khi tạo trang, bạn chỉ cần đặt href vào bất cứ thứ gì bạn cần. Hoặc ngay cả trên tải dom chỉ cần thiết lập các thuộc tính href nếu bạn có. Vấn đề là không phải xử lý thuộc tính src của khung nội tuyến và điều này làm cho nó có thể. –

1
$(".excel").click(function() { 
    var t = $(this).closest(".tblGrid").attr("id"); 
    window.frames["Iframe" + t].document.location.href = pagename + "?tbl=" + t; 
}); 

đây là những gì tôi sử dụng, không có jquery cần thiết cho việc này. trong kịch bản cụ thể này cho mỗi bảng tôi có biểu tượng xuất excel, buộc khung nội tuyến được đính kèm vào bảng đó để tải cùng một trang với một biến trong Chuỗi truy vấn mà trang tìm kiếm và nếu phản hồi tìm thấy ghi luồng excel mimetype và bao gồm dữ liệu cho bảng đó.

3

Đặt thuộc tính src không hoạt động đối với tôi. Khung nội tuyến không hiển thị url.

gì làm việc cho tôi là:

window.open(url, "nameof_iframe"); 

Hy vọng nó sẽ giúp một ai đó.

4
<script type="text/javascript"> 
    document.write(
    "<iframe id='myframe' src='http://www.example.com/" + 
    window.location.search + "' height='100' width='100%' >" 
) 
</script> 

Mã này mất url-tham số (a = 1 & b = 2) từ trang chứa iframe và gắn chúng vào địa chỉ cơ sở của iframe. Nó hoạt động cho mục đích của tôi.

Các vấn đề liên quan