使用jQuery訪問iframe而不使用id

-3

有沒有方法可以在不使用id的情況下訪問html iframe。我有一個動態生成的iframe，每次頁面刷新時都會獲得一個新的id。我試圖動態調整iframe的大小，因爲瀏覽器被調整大小，但似乎無法弄清楚如何使用jQuery訪問iframe。使用jQuery訪問iframe而不使用id

來源

2016-01-04 bos570

有很多* * * *很多方法，但它們都取決於你的具體情況。 https://api.jquery.com/category/selectors/是一個體面的起始地點。 – Quentin

Errrr ....你不能只給它一個不會改變的獨特類嗎？ – AdamJeffers

發佈'iframe'（僅限標籤），可能有一個不會更改的唯一標識符。 –

只要給所有的內聯框架一個獨特的ID。這樣，您可以選擇$('#uniqueId')的所有iframe。如果你只想選擇其中的一個，那麼你可以爲每個iframe中添加一個onClick事件，它告訴你自身的ID：

<iframe onClick="resize('iframe1');" id="iframe1" />

function resize(id) { 
    $('#' + id).css('height', '100px'); 
}

來源

2016-01-04 17:09:26 k97513

爲什麼不使用類來選擇？這樣你就可以刪除醜陋而過時的'onclick'屬性和重複的'id'。 –

我的問題是，iframe是由js庫（epub.js）生成的。它是自動生成的，它具有自己的唯一標識，每次頁面刷新時都會更改它。 – bos570

如果你想要所有的iframe，那麼使用'$（'iframe'）'。 – k97513

如果你有在它產生，其中控制的，我建議將它包裝在父母身上，然後將其作爲目標。

<div id="frameGoesHere"> 
    ... 
    <iframe id="unknownDynamicallyGeneratedID"></iframe> 
    ... 
</div>

然後：

$('#frameGoesHere > iframe').function(){ /* stuff */ }

來源

2016-01-04 18:40:02

不幸的不是。它是由一個庫函數生成的，我寧願不去嘗試解剖和改變這個方面的任何東西。 – bos570

可以在上百種不同的方式使用替代選擇，該演示展示了3種方式將做到這一點：

的標籤選擇器
一類別選擇器
屬性選擇器

處理iframe的一個重要事情是需要很長時間才能加載（當然相對來說），因此請將函數放入window.onload或使用setTimeout。

DEMO

父

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     html, 
     body { 
      box-sizing: border-box; 
      font: 400 16px/1.45 "Verdana"; 
      height: 100vh; 
      width: 100vw; 
     } 

     *, 
     *:before, 
     *:after { 
      box-sizing: inherit; 
      margin: 0; 
      padding: 0; 
      border: 0 none hlsa(0%, 0, 0, 0); 
      outline: 0 none hlsa(0%, 0, 0, 0); 
     } 

     body { 
      position: relative; 
      background-color: #111; 
      color: #EEE; 
      padding: 10px; 
     } 

     label { 
      display: block; 
      color: yellow; 
      margin: 5px 0; 
     } 

     iframe { 
      height: 210px; 
      width: 600px; 
      overflow: hidden; 
      background: white; 
     } 

     fieldset { 
      width: 600px; 
      border-radius: 10px; 
      padding: 5px; 
     } 

     legend { 
      font-size: 1.3rem; 
      font-variant: small-caps; 
      color: yellow 
     } 
    </style> 
</head> 

<body> 
    <section class="jFrame"> 
     <iframe id="i-Cant" name="iName" class="iClass" src="child.html"></iframe> 
    </section> 

    <fieldset> 
     <legend>Alternate Selectors</legend> 
     <label for="out1">Tag </label> 
     <output id="out1"></output> 
     </label> 
     <label for="out2">Class </label> 
     <output id="out2"></output> 

     <label for="out3">Attribute </label> 
     <output id="out3"></output> 

    </fieldset> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
      window.onload = setTimeout(function() { 

      // Selector: tag 
      var targetTag = $('iframe').contents(); 

      // Selector: class 
      var targetClass = $('.iClass').contents(); 

      // Selector: attribute 
      var targetAttribute = $('[name]').contents(); 

      var iTag = targetTag.find('article').text(); 
      var iClass = targetClass.find('.content').text(); 
      var iAttribute = targetAttribute.find("[title]").text(); 

      $('#out1').val(iTag); 
      $('#out2').val(iClass); 
      $('#out3').val(iAttribute); 
     }, 3000); 

    </script> 
</body> 

</html>

child.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Child</title> 
</head> 

<body> 
<article class="content" title="Use Any Selector">This is the text that's targeted by the parent page by accessing the iframe with a tag, class, and attribute selector</article> 
</body> 
</html>

來源

2016-01-04 20:31:41 zer00ne

使用jQuery訪問iframe而不使用id

回答

相關問題