Question

我有一个显示iframe，instaframe.html的网页。我正在尝试创建一个网页，我可以使用输入字段设置iframe src。我不知道如何做到这一点，或者它是否可能......

Instaframe.html：

<html>
    <head>
        <title>InstaFrame</title>
    </head>
    <body>
        <iframe src="http://snapwidget.com/in/?h=bWU5fGlufDEyNXwzfDN8fG5vfDV8bm9uZXxvblN0YXJ0fG5vfG5v&ve=070515" 
            title="Instagram Widget" 
            class="snapwidget-widget" 
            allowTransparency="true" 
            frameborder="0" 
            scrolling="no" 
            style="border:none; overflow:hidden; width:390px; height:390px"
    </body>
</html>

Instaframe.html位于我的树莓派上，连接到我墙上相框中的显示器。我的目标是能够浏览覆盆子上的网页，并从那里更改显示器上显示的iframe src。我在raspberry pi上安装并运行了一个php webserver。

Answer 1

又快又脏：

<input type="text" id="iframe_src" value="http://snapwidget.com/" />
<input type="button" id="iframe_src_button" value="Go!" />
<iframe id="iframe"></iframe>
<script type="text/javascript">
    document.getElementById("iframe_src_button").onclick = function () {
        document.getElementById("iframe").src = document.getElementById("iframe_src").value
    };
</script>

现场演示：http://jsfiddle.net/4b60o7h1/

这是有效的，因为snapwidget.com不会返回可能阻止嵌入的X-Frame-Options标头。例如Google和StackOverflow会返回此标题，因此您无法嵌入它们。

从其他网页更改iframe src

1 个答案: