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

Posted 2023-05-09

【中文标题】根据视口大小更改 iframe 中的 src

【英文标题】：change src in iframe which depend on viewport size

【发布时间】：2015-09-24 16:23:48

【问题描述】：

我是网站领域的新手

我正在尝试更改我的 iframe 中的 src，其中 src 内容是一个表格以及宽度和高度，这使其无法响应

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

这是我的代码

<iframe   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"

但我不知道该怎么做

有没有办法做到这一点？我在互联网上发现的都是使用链接或按钮来更改源代码

【问题讨论】：

您的网站是否与fxempire.com 在同一个域上运行？

javascript.info/tutorial/same-origin-security-policy

我正在尝试自动更改 src 内的以下宽度什么时候？在加载期间？调整浏览器大小？

@BenM 不，我的网站只是使用他们的网站管理员工具

@lshettyl 在加载期间

【参考方案1】：

好吧，因为 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/

【参考方案2】：

可能是这样的？

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

【参考方案3】：

对我来说，在给定视口大小的情况下选择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>

它会在您第一次加载页面时选择源，但如果您稍后调整视口大小则不会更改它，因为您需要监听调整大小事件 (this might help)。