如何使用jQuery？從文本輸入字段中發佈的<iframe>標籤中獲取「src」屬性？

Question

假設標籤是從谷歌地圖的嵌入鏈接：

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.306387423317!2d-74.04668908414591!3d40.68924937933434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sin!4v1495685672306" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> 

而且我也有一個按鈕，粘貼到該文本輸入字段：

<input type="text" id="embed_link" name="embed_link"> 

<button class="save_button" data-button="location">Save</button> 

然後我可以得到iframe標籤的價值使用jQuery像這樣：

$(document).ready(function() { 
    $(".save_button").on('click', function() { 
    var embed_link = $("#embed_link").val(); 
    }); 
}); 

我怎麼會那麼您可以通過embed_link變量「src」屬性？

這是我已經試過：

var embed_src = embed_link.attr('src'); 
or 
var embed_src = $("#embed_link").val().attr('src'); 

//(doesn't work. I keep getting this error: 
Uncaught TypeError: $(...).val(...).attr is not a function. 
It probably has to be an iframe on the page for this to work I guess?) 

下面是同一

Answer 1

$(document).ready(function() { 
 
    $(".save_button").on('click', function() { 
 
    
 
    var embed_link = $($("#embed_link").val()).attr('src'); 
 
    //var embed_src = $('#embed_link').val().attr('src'); 
 
    
 
    alert(embed_link); // Works 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="embed_link" name="embed_link"> 
 

 
<button class="save_button" data-button="location">Save</button> 
 

 
<!--p> 
 
Iframe test link: 
 

 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.306387423317!2d-74.04668908414591!3d40.68924937933434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sin!4v1495685672306" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> 
 

 
</p-->

一個jsfiddle，你應該使用$($("#embed_link").val()).attr('src');

這裏的jsfiddle：https://jsfiddle.net/0e5butsh/

您正在收到錯誤，因爲您正試圖從字符串中獲取src。

$（「＃embed_link」）。val（）爲您提供字符串。你需要這個字符串轉換爲元素，並獲得SRC

Answer 2

只需使用embed_link作爲選擇

$(document).ready(function() { 
 
    $(".save_button").on('click', function() {  
 
    var embed_link = $("#embed_link").val();   
 
    alert($(embed_link).attr('src')); // Works 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="embed_link" name="embed_link"> 
 

 
<button class="save_button" data-button="location">Save</button> 
 

 
<!--p> 
 
Iframe test link: 
 

 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.306387423317!2d-74.04668908414591!3d40.68924937933434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sin!4v1495685672306" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> 
 

 
</p-->

Answer 3

$(document).ready(function() { 
 
    $(".save_button").on('click', function() { 
 
    
 
    var embed_link = $("#embed_link").val(); 
 
    
 
    console.log($(embed_link).attr('src')); // Works 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="embed_link" name="embed_link"> 
 

 
<button class="save_button" data-button="location">Save</button> 
 

 
<!--p> 
 
Iframe test link: 
 

 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3025.306387423317!2d-74.04668908414591!3d40.68924937933434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25090129c363d%3A0x40c6a5770d25022b!2sStatue+of+Liberty+National+Monument!5e0!3m2!1sen!2sin!4v1495685672306" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe> 
 

 
</p-->

1. 通過將輸入值包裝到$（）中，將輸入的值更改爲jquery對象。
2. 使用.attr('src')得到SRC

Answer 4

$(document).ready(function() { 
    $(".save_button").on('click', function() { 

    var embed_link = $("#embed_link").val(); 
    //var embed_src = $('#embed_link').val().attr('src'); 

    console.log($(embed_link)[0].src); 
    }); 
});