如何使用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); 
    }); 
});