使用 Javascript、JQuery 动态更改 iFrame Src

Question

使用 Javascript、JQuery 动态更改 iFrame Src

过去几个小时我一直在尝试更改 iFrame 的 src。这似乎是一个简单的任务，但由于某种原因，经过数百次尝试并阅读了堆栈上的许多其他问题和答案后，我仍然发现自己无法更改 iFrame 的 src。正如您从下面的代码中看到的，我已经尝试过很多次了。我究竟做错了什么？

    <body>

       <p><iframe src="http://localhost/ok.html" name="myFrame" width="500" marginwidth="0"     height="500" marginheight="0" align="middle" scrolling="auto"></iframe>


<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
    function loadPages(){
        var loc = "http://localhost/morningmarketweb/index.html";

        //var myIframe = document.getElementById("myFrame");

        //window.frames[myIframe].location = "http://localhost/morningmarketweb/index.html";

        // $(myIframe).load('http://localhost/morningmarketweb/index.html');

        // document.getElementId('myFrame').src="google.com";

       // var myIframe = document.getElementById('myFrame');
       // myIframe.src=loc;


        //$('#myFrame').attr('src', loc);

        document.getElementById('myFrame').setAttribute('src', loc);


    }
    </script>
    </body>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Lit*_*rvi 5

这是代码：

<iframe src="http://jquery.com/" id="myFrame" width="500" marginwidth="0" height="500" marginheight="0" align="middle" scrolling="auto"></iframe>
<button onclick="loadPages()">Click Me</button>
<script>
    function loadPages(){
        var loc = "http://es.learnlayout.com/display.html";
        document.getElementById('myFrame').setAttribute('src', loc);
    }
</script>

Run Code Online (Sandbox Code Playgroud)

正如您所看到的，第一个问题是您通过 Id 请求元素...那么您需要指定一个 Id。第二个问题，您需要有一个触发“loadPages”操作的元素......这样您就可以为其设置一个按钮。

这也是功能示例：

http://jsfiddle.net/littapanda/Jsc4E/

归档时间：	11 年，10 月前
查看次数：	48617 次
最近记录：	11 年，10 月前