Question

我是网站领域的新手

我正在尝试更改我的iframe中的src，其中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

Answer 1

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

通过使用iframe，它可以这样工作，但只是真的很慢，因为iframe需要很多时间来加载......：

public class TestPacklineOrderManagementService
{
    public class TestSetProduct {
        IPackLineOrderRepository _packLineOrderRepository;
        IRawProductRepository _rawProductRepository;
        // etc
        public TestSetProduct() {
            _packLineOrderRepository = Substitute.For<IPackLineOrderRepository>();
            _packLineOrderRepository.GetActive(Arg.Any<PackLine>()).Returns(x => null);
            _rawProductRepository = Substitute.For<IRawProductRepository>();
            // etc
        }
        [Fact]
        public void CreateNewProductWhenNoPacklineOrderIsAvailable()
        {
            // Any test specific setup...               

            _packlineOrderManagementService.SetProduct(1,1);

            _packLineOrderRepository.Received()
                .Insert(Arg.Is<PackLineOrder>(x => x.PackLine.Id == 1 
                                                && x.Product.Id == 1));
        }       
        [Fact]
        public void AuditCreateNewProductWhenNoPacklineOrderIsAvailable()
        {
            _packlineOrderManagementService.SetProduct(1, 1);

            _auditRegistrationService.Received()
                .Audit(Arg.Is<PackLineOrderAudit>(item => 
                               item.Action == PackLineOrderAction.CreatePacklineOrder));
        }
    }
    public class TestSomeOtherScenario {
        // tests...
    }
}

http://jsfiddle.net/ebjsd8xx/3/

编辑：我更改了代码以获得更好的性能但是，好吧 - 图表仍然加载速度很慢，但在预览中也是如此..

$(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/7/

Answer 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

上

Answer 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)。

更改依赖于视口大小的iframe中的src

3 个答案: