抓取IFrame源然后更新输入文本框

时间:2013-10-03 14:39:42

标签: javascript jquery html iframe

http://jsbin.com/ItaZAZu/1/edit

实质上,当您在文本框中键入say bing.com时,一旦bing加载,请单击任何其他链接(例如图像)。我一直在尝试更新iframe源中的输入值,当它在contentWindow中通过href更改位置时,但没有任何运气。我试过的一切都没有用,现在我对如何做到这一点毫无头绪。

非常感谢任何帮助。

完整代码

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
<style type="text/css">
span.style {
    cursor: pointer;
    font-family: Sans-Serif;
    font-size: 1.5em;
    font-weight: bold;
    padding: 0 .5em;
    color: #666;
}

span.style:hover {
    color: #999;
}

span.style:active {
    color: #000;
}

input#goto {
    width: 80%;
    font-family: Sans-Serif;
    font-size: 1.25em;
}

iframe#browsensearch {
    width: 100%;
    height: 90%;
}
</style>

<script type='text/javascript'>
$(document).ready(function() {
    $("#goto").click(function() {
        $(this).select();
    });

    $("#forward").click(function() {    
        history.forward();
    });

    $("#back").click(function() {
        history.back();
    });

    $("#goto").keyup(function(e) {
        var val = $(this).val(),
        sitesgohere = document.getElementById("browsensearch");

        sitesgohere.src = "http://" + val;
    });
});
</script>

<form name="sites" align="center">
    <span id="back" class="style">&lt;</span>
    <span id="forward" class="style">&gt;</span>
    <input id="goto" type="text" placeholder="http:// added by default" />
</form>

<iframe id="browsensearch" src="http://theextinctionprotocol.wordpress.com/2013/10/01/large-fireball-seen-acoss-six-midwestern-states/" width="100%" height="100%" allowtransparency="true" frameBorder="0">
    Your browser does not support IFRAME's
</iframe>

1 个答案:

答案 0 :(得分:1)

打开浏览器的控制台,并在运行该示例时检查错误消息。

如果由于Same Origin Policy

,IFRAME中的页面属于与父页面不同的域,则无法访问IFRAME的元素(包括contentWindow