如何使用 <iframe> jQuery 从文本输入字段中发布的标签中获取 "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> 

然后，我可以使用 jQuery 获取 iframe 标签的值，如下所示：

$(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?)

这是相同的jsfiddle

Answer 1

只需使用 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 2

$(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 3

$(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-->

你应该使用$($("#embed_link").val()).attr('src');

这是JSFIDDLE：https://jsfiddle.net/0e5butsh/

您

收到错误，因为您正在尝试从字符串中获取 src。

$("#embed_link"(.val(( 给你字符串。 你需要将此字符串转换为元素并获取 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); 
  });
});