根据视口大小改变iframe中的SRC

change src in iframe which depend on viewport size

本文关键字：iframe 中的 SRC 改变 视口      更新时间：2023-09-26

我是网站领域的新手

我试图改变src在我的iframe src内容是一个表格随着宽度和高度这使它不响应

我试图改变src，这取决于视口的大小

这是我的代码

<iframe width="100%" height="410" scrolling="yes" frameborder="0" scrolling="no" allowtransparency="true" src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082F60"></iframe>                              
            <div id="fxempire_link" style="width:500px;font-size: 11px;">                        
            The Free Charts are Powered by <a rel="nofollow" style="text-decoration: underline;" target="_blank" href="http://www.fxempire.com">FXEmpire.com</a> - Your Leading Financial Portal</div>

我试图在src内自动更改以下宽度

src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082F60"

但是我不知道该怎么做

有办法吗??我在网上找到的都是使用链接或按钮来改变src

因为Access-Control-Allow-Origin你不能用ajax做，你可以用php做，但我不知道这是合法的/非法的。

通过使用iframe，它以这种方式工作，但只有真正缓慢，因为iframe需要很多时间加载…:

$(window).bind('load resize',function(){
    var windowH = $(window).height(),
        windowW = $(window).width();
    $('#iframe').attr('src','//tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width='+windowW+'&height='+windowH+'&text_color=333&text_hover_color=082F60');
    $('#iframe').css({'height':windowH+'px', 'width':windowW+'px'});    
})
http://jsfiddle.net/ebjsd8xx/3/

编辑:为了更好的性能，我稍微修改了一下代码，但是，图表加载速度仍然很慢，但在预览版上是一样的。

var resizeTimer;
$(window).load(function(){
   $(window).trigger('resize');
});
$(window).resize(function(e){
    var windowH = $(window).height(),
        windowW = $(window).width();
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
       $('#iframe').attr('src','http://tools.fxempire.com/sidebar- quotes.php?instruments=5,10,1,2,4,3&width='+windowW+'&height='+windowH+'&text_color=333&text_hover_color=082F60');
       $('#iframe').css({'height':windowH+'px', 'width':windowW+'px'}); 
     }, 250);

})
http://jsfiddle.net/ebjsd8xx/7/

也许像这样?

jQuery(document).ready(function(){
    var iframe=jQuery('iframe'),/** target iFrame */
        src=iframe.attr('src'); /** src of iFrame */
    /** check viewport size */
    if (window.innerWidth<945){
        /** remove width value from src */
        src=src.replace(/(&width=[0-9]+)/,'');
        /** add new width */
        src+='&width=275';
        /** PROFIT */
        iframe.attr('src',src);
    }
});
在jsfiddle

对于我来说，选择给定视口大小的src的最简单方法是使用小脚本，其中iframe具有id="vid" 

<script>
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  
  if (w.matches) {
    vid.src = "media/test_1.mp4";
  } else {
    vid.src = "media/test_2.mp4";
  }
</script>

当您第一次加载页面时，它将选择源，但如果您稍后调整视口大小，则不会更改源，因为您需要侦听resize事件(这可能会有所帮助)。

相关文章：