IFrames и кнопка «Назад» - PullRequest
Новая
       7

IFrames и кнопка «Назад»

0 голосов
/ 19 декабря 2010

Рассмотрим следующий HTML: (Написано для Google Chrome) 

<html>
  <head>
    <script language="javascript">
      function AddToIFrame(){
        var Frame=document.getElementById("BackTest").contentWindow.document;
        Frame.open();
        Frame.write(Math.random());
        Frame.close();
      }
    </script>
  </head>
  <body>
    <iframe id="BackTest" name="BackTest" width="100%" height="222"></iframe>
    <a href="javascript:AddToIFrame();">Add To IFrame</a>
    <p>How Can I Modify This HTML So That After Clicking The Link Above, I Can Use The Back Button To Go To Previous IFrame Content?</p>
  </body>
</html>

Каждый раз, когда вы нажимаете на ссылку, содержимое iframe будет меняться.Это прекрасно работает - и для моих целей, ДОЛЖЕН использовать document.write, чтобы изменить содержимое iframe.

Моя проблема в том, что я хочу, чтобы кнопка назад возвращалась к предыдущему содержимому iframe - как это происходит намного других страниц.Однако в этом примере происходит то, что кнопка «Назад» возвращает меня на предыдущую главную страницу.

Как сделать так, чтобы кнопка «Назад» возвращала iframe до тех пор, пока iframe не исчезнет из истории, и только тогда перейдите «назад» с главной страницы?

Ответы [ 3 ]

1 голос
/ 02 июня 2012

Вместо Frame.open(); используйте Frame.open('text/html', 'replace');.

0 голосов
/ 20 декабря 2010

Я знаю, что это не тот ответ, который вы ищете, но я не думаю, что это вообще возможно, поскольку кнопка «Назад» контролируется браузером, а не JavaScript.

Вы можетеизмените код так, чтобы, когда пользователь нажимал кнопку, которую вы могли сделать 

window.location.href = 'http://www.youradress.com/yourpage?iframeurl=' + iframeurl;

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

, таким образом, вы получаете полную загрузку страницы, и URL остается в истории, а кнопка "Назад" работает как вы хотите

0 голосов
/ 20 декабря 2010

Easy-peasy с некоторыми новыми функциями HTML5. 

<html>
  <head>
    <script>
      var inner;
      window.addEventListener('load', function() {
        inner = document.getElementById('inner').contentWindow;
        inner.document.open();
        inner.document.write(
          "\x3cscript\x3e" +
            "var contents = document.getElementById('contents');" +
            "window.addEventListener('load', function() {" +
              "contents = document.getElementById('contents');" +
            "}, false);" +
            "window.addEventListener('message', function(e) {" +
              "history.pushState(e.data, '', '');" +
              "contents.value = e.data;" +
            "}, false);" +
            "window.addEventListener('popstate', function(e) {" +
              "contents.value = e.state;" +
            "}, false);" +
          "\x3c/script\x3e" +
          '\x3ctextarea id="contents" readonly\x3e\x3c/textarea\x3e'
        );
        inner.document.close();
      }, false);
      function messageInner() {
        inner.postMessage(Math.random(), '*');
      }
    </script>
  </head>
  <body>
    <iframe id="inner"></iframe>
    <a href="#" onclick="messageInner(); return false">Clickety</a>
  </body>
</html>

Хотя document.write действительно не следует использовать;просто разместите свою собственную страницу (с <iframe src="…">) с этим внутренним скриптом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...