jQuery Force ustawia atrybut src dla iframe


83

Mam stronę główną (właściwie JSP) z ramką iframe wewnątrz niej jako;

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

Teraz na stronie głównej znajduje się wiele linków (renderowanych dynamicznie przez JSP), które mogą próbować ustawić src na jakiś adres URL ...

Teraz moje pytanie brzmi, używając jQuery (może to być live ()), czy mogę zmienić to w taki sposób, aby atrybut „src” dla abc_frame zawsze miał jakąś określoną wartość (np. „SomefixedURL”)

Nie mogę przechwycić kliknięcia linku, ponieważ jest on całkowicie dynamicznie tworzony przez jakiś kod Java i dlatego próbuję zastąpić iframe src?

Odpowiedzi:


166

Użyj atr

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

W ten sposób możesz pobrać i ustawić każdy atrybut znacznika HTML. Zauważ, że jest też .prop(). Zobacz .prop () vs .attr () o różnicach. Wersja skrócona: .attr()jest używana w przypadku atrybutów, ponieważ są one zapisane w kodzie źródłowym HTML i .prop()dotyczy całego kodu JavaScript dołączonego do elementu DOM.


Powodem, dla którego to nie zadziała, jest to, że po załadowaniu strony inny link zmieniłby src na nową wartość ...
testndtv

Jeśli umieścisz kod na końcu pliku, kod zostanie wykonany po innych skryptach. Jeśli problem jest tworzony przez określony link, który kliknie użytkownik, możesz dodać drugie zdarzenie onclick do łącza. W przeciwnym razie musisz użyć setTimout / setInterval i wielokrotnie sprawdzać wartość src (brzydko!).
PiTheNumber

20

jeśli używasz jQuery 1.6 i nowszych , chcesz użyć .prop () zamiast.attr():

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

Zobacz to pytanie, aby wyjaśnić różnice.


4
Ciekawy link, ale pamiętaj, że odpowiedź została zaktualizowana, ponieważ jQuery przywrócił attr() zachowanie. Ogólnie rzecz biorąc, nie zgodziłbym się na użycie .prop()tutaj, ponieważ srcjest to atrybut, a nie właściwość, jak .prop()wyjaśnia dokumentacja API dla ciebie, do której prowadzi łącze.
PiTheNumber,

9

Podczas generowania linków ustaw cel na właściwość nazwy iframes i prawdopodobnie nie będziesz musiał w ogóle zajmować się jquery.

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

Jeśli to możliwe, dobrze jest używać rodzimej metody przeglądarki, ale myślę, że użytkownik ma dynamiczne linki, dlatego musi przechwytywać atr kliknięcia.
efwjames,

Jak dynamiczny? Podczas generowania strony po prostu ustaw href na cokolwiek potrzebujesz. Lub nawet przy ładowaniu domeny po prostu ustaw atrybut href, jeśli musisz. Chodzi o to, aby nie musieć obsługiwać właściwości src elementu iframe, a to sprawia, że ​​jest to możliwe.
Brian Rizo,


5

Ustawienie atrybutu src nie działa dla mnie. Element iframe nie wyświetlał adresu URL.

U mnie zadziałało:

window.open(url, "nameof_iframe");

Mam nadzieję, że to komuś pomoże.


ustawienie z .attr () również nie działało dla mnie. To jednak działa
Andy N

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

Ten kod pobiera parametry url (? A = 1 & b = 2) ze strony zawierającej element iframe i dołącza je do podstawowego adresu URL elementu iframe. Działa na moje potrzeby.


document.writejest równoznaczne z użyciem eval()- podlega wstrzyknięciu skryptu! Używać tylko z najwyższą ostrożnością!
amfetamachine

1

Nie możesz ustawić źródła FIX iframe lub uniemożliwić przesyłanie javascript / form do zmiany jego lokalizacji. Jednak można umieścić skrypt onload z działaniem strony i zmiana każdego łącza dynamicznego.


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

to jest to, czego używam, nie potrzeba do tego jQuery. w tym konkretnym scenariuszu dla każdej tabeli, którą mam z ikoną eksportu programu Excel, zmusza to ramkę iframe dołączoną do tej tabeli do załadowania tej samej strony ze zmienną w ciągu zapytania, którego strona szuka, a jeśli znaleziona odpowiedź zapisuje strumień z excel MIME i zawiera dane dla tej tabeli.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.