Javascript 根据视口大小更改iframe中的src

我在网站领域是个新手

我试图改变iframe中的src，它的src内容是一个表，还有宽度和高度，这使得它没有响应性

我正在尝试更改src，它取决于视口的大小

这是我的密码

免费图表是由您领先的金融门户提供支持的

由于访问控制允许源代码，您不能使用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'});    
})

编辑： 为了提高性能，我对代码做了一点修改，但是，嗯，图形的加载速度仍然非常慢，但是在预览版上是一样的

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);


})

也许是这样

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);
    }
});

jQuery（文档）.ready（函数（）{
var iframe=jQuery（'iframe'），/**目标iframe*/
src=iframe.attr（'src'）；/**iframe的src*/
/**检查视口大小*/
如果（window.innerWidth对于我来说，给定视口大小，选择
src
的最简单方法是使用一个小脚本，其中iframe具有
id=“vid”


var w=window.matchMedia（（最大宽度：700px））；
var vid=document.getElementById（“vid”）；
如果（w.matches）{
vid.src=“媒体/测试_1.mp4”；
}否则{
vid.src=“媒体/测试_2.mp4”；
}

这将在您第一次加载页面时拾取源，但如果以后调整视口大小，则不会更改源，或者需要侦听resize事件（）.
您的站点是否与
fxempire.com
运行在同一个域上？我正在尝试在加载过程中自动更改src内的以下宽度？调整浏览器大小？@BenM否，我的网站只是使用他们的网站管理员tools@lshettyl装载期间
<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>