0

我可以使用某种 JS 脚本来利用 url 中的大小控制吗？

<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&amp;width=1280&amp;height=1280&amp;secure=true&amp;key=0202f0ddb5a3458aabf520e5ab790ab9&amp;"

（我的目标实际上是将此 Twitch 提要作为我网页的背景 - 调整 iframe 的实际内容的大小实际上是一种非常不寻常但额外的享受，因为 Twitch 的 url 的工作方式！）

说清楚，我学JS很早，想找个初学者的解决方案，拿浏览器窗口大小来动态控制这个url中的参数来控制这个iframe中内容的大小。

width=1280&amp;height=1280&amp;

是这里的关键线。我需要使这些测量遵循视口大小而不是静态的。什么方法最好做到这一点？

4

1 回答 1

1

您当然可以以编程方式将其设置为您的 iframe，并根据您的视口大小等变量src构建url。src

你可以尝试这样的事情：

function loadIframe() {
    var url = '',
        viewportWidth  = document.documentElement.clientWidth,
        viewportHeight = document.documentElement.clientHeight;

    url = 'https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&amp;width=' + viewportWidth + '&amp;height=' + viewportHeight + '&amp;secure=true&amp;key=0202f0ddb5a3458aabf520e5ab790ab9&amp;';

    document.getElementById('myIframe').src = url;
}

然后，您可以在调整窗口大小和完成加载窗口时重新加载 iframe：

window.onload = loadIframe;
window.onresize = loadIframe;

但是，我实际上建议使用 jQuery 来帮助您执行此操作，因为您可以更轻松地绑定到跨浏览器事件。

于 2013-09-16T19:03:37.250 回答