получить URL-адрес iframe и обновить введенный текст

Question

У меня есть iframe на странице, и я хочу получить текущий URL для этого iframe и обновить текст ввода с этим URL.

Я обнаружил, что могу получить URL для iframe, используя

document.getElementById("iframe_id").contentWindow.location.href

<iframe id="iframe" name="iframe" src="" width="100%" height="100%" style="border-width: 0px; border-color:#ffffff; border-style: solid;" scrolling="no" border="0" class="auto-style1" frameborder="0" marginheight="0" marginwidth="0"> </iframe>

<script type="text/javascript">
var link = document.getElementById("iframe").contentWindow.location.href ;
document.Show.link.value = link;

</script>
<strong>link for the iframe :</strong>
    <input name="link" type="text" size="100" />

<a onclick="document.all.iframe.src=''" href="url" target="iframe">LINK</a>

это не сработало.

Я не знаю, как его использовать и обновлять текст ввода с этим URL каждый раз, когда изменяется URL-адрес ифрама

URL-адрес iframe может измениться, если кто-то нажмет на ссылку внутри него

С наилучшими пожеланиями,

Answer 1

ПРИМЕЧАНИЕ : Вы не можете получить доступ к элементам IFRAME (включая contentWindow), если страница в пределах IFRAME принадлежит домену, отличному от родительской страницы, из-за Одинаковая политика происхождения (Цитата из - Юрий Галантер )

Однако вот простой и простой браузер, который использует keyup для поиска;может быть, это пригодится вам.

Если вы решите добавить кнопки, чтобы идти вперед и назад в истории, вы можете использовать history.back(); и history.forward(); для этой конкретной цели.

<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();
    });

    $("#bing").click(function() {
        var sitesgohere = document.getElementById("browsensearch");
        sitesgohere.src = "http://www.bing.com/";
        $("#goto").val("bing.com");
    });

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

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

<form name="sites" align="center">
    <span id="bing" class="style">Bing</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>

Answer 2

Ваш код iframe неверен.Вот оно:

<iframe id="iframe" src="url_of_your_iframe" ... ></iframe>
<input type="text" id="input" />
<script type="text/javascript">
(function() {
  document.getElementById('input').value = document.getElementById('iframe').src;
})();
</script>

Вот и все.

Редактировать: подождите, когда изменяется URL вашего iframe?как?