Question

以下是iframe代码我想知道如何更改src链接当我们点击任何按钮时它会更改链接并相应地显示结果而不重新加载页面

谢谢，

<iframe name="reloader" id="reloader" width="500" height="400" src="http://www.google.com/"/>

Answer 1

$('#yourBtn').on('click', function(){
   $('#reloader').attr('src', 'yourNewLink'); 
})

Answer 2

如果您可以使用链接代替按钮，这是一个完美的解决方案：

Basic jQuery question: How to change iframe src by clicking a link?

Answer 3

（如果你过度复杂的话）

         <a href="http://www.somewebsite.com" target="reloader">
            click here
         </a>


        <iframe name="reloader" 
             id="reloader" width="500" 
             height="400" 
             src="http://www.google.com/"/>

没有jquery（seo友好且退化很好）

         <a href="http://www.somewebsite.com" class="mybutton" target="reloader">
            click here
         </a>


        <iframe name="reloader" 
             id="reloader" width="500" 
             height="400" 
             src="http://www.google.com/"/>



       <script type="text/javascript">

           $(".mybutton").click(function(e) {

              /* stop the link */
              e.preventDefault();

           /* get the url from the link */
           var url = $(this).attr("href");

          /* do something with it */
           $("#reloader").attr("src",url);

           });

       </script>

更改iframe src中的链接

3 个答案: