将jquery变量传递给iframe src

问题描述:

我想将我从文本框中获得的值传递给iframe的src。我使用下面的代码从文本框中获取值,在按钮上单击它应该传递给iframe src并替换查询:'*'与传递的变量,即*应该被替换。 如何继续? Foloowing是用HTML代码的iframe将jquery变量传递给iframe src

<iframe src="http://localhost:5601/#/dashboard/New-Dashboard?embed&_a 
=(filters:!(),panels:!((col:1,id:env,row:1,size_x:4,size_y:3,type:visualization) 
,(col:5,id:env-2,row:1,size_x:4,size_y:3,type:visualization),(col:9,id:env-3, 
row:1,size_x:4,size_y:3,type:visualization)),query:(query_string:(analyze_wildcard: 
!t,query:'*')),title:'New%20Dashboard')&_g=(refreshInterval:(display:Off,pause 
:!f,section:0,value:0),time:(from:now%2Fy,mode:quick,to:now%2Fy))" height="600" 
width="800" id="myframe"></iframe> 



<!DOCTYPE html> 
<html> 
<head> 
    <title>jQuery With Example</title> 
    <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $('.btnGetName').click(function (event) { 
     var name = $('.txtName').val(); 
     alert(name); 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div> 
    <input type="text" class="txtName" value="hello" id="querypass"/><br /> 
    <button class="btnGetName">Get Name</button> 
    </div> 
</body> 
</html> 

试试这个

var src = $('#myframe').attr('src'); 
 
var newSrc = src.replace("query:'*'", "query:'" + name + "'"); 
 
$('#myframe').attr('src', newSrc);

你可以试试下面的代码:

注:假设你是相同的HTML文档中:

$('.btnGetName').click(function (event) { 
     var name = $('.txtName').val(); 
     alert(name); 
     var iframeObj = $("#myframe"); 
     var srcString = iframeObj.attr("src"); 
     srcString = srcString.replace("query:'*'","query:'"+name+"'"); 
     iframeObj.attr("src",srcString); 
}); 

请确保您不要在文本字段中输入单引号。