Positionen bei Links

th_wolfgang · 12. Aug. 2015

Hallo,

ich habe in einer Webseite ein iFrame alle Links werden im iFrame aufgerufen, leider bleibt wenn ich z.B. im Footer einen Link tätige die Position des Bildschirmes (Footer) erhalten und ich springe nicht zum oben liegenden iFrame.

Gibt es da ein JavaScript für? Oder wie kann ich das machen?

Danke & LG
Wolf

TecEye · 12. Aug. 2015

kannst ja mit nem #anker arbeiten, oder scrollTop mit jQuery bemühen

th_wolfgang · 12. Aug. 2015

Hallo,

ja bin schon am testen, habe aber noch nix brauchbares gefunden, bei klick auf einen Link soll, egal bei welchem Link der Webseite an eine Div gescrollt werden... verstehe nicht das dies bei mir nicht funktionieren will :/

LG wolf

TecEye · 12. Aug. 2015

Code:

$('body').scrollTo('#target');

th_wolfgang · 12. Aug. 2015

Hallo,

danke leider geht das auch nicht, passiert garnix... außer das der Link dann auch nicht mehr funktioniert.
evtl. deswegen? ich habe bereits eine Linkumleitung drin...

HTML:

<script type="text/javascript">
$(document).ready(function(){
   $('a').attr('target', 'icontent');
});
</script>

LG & Danke wolf

TecEye · 12. Aug. 2015

ja geb dem iframe ne id und hau meinen code in deine anonyme function

th_wolfgang · 12. Aug. 2015

Danke Receye,

macht er leider auch nicht... bleibt brav am Footer oder einer anderen Linkposition kleben, man merkt nicht mal das viel weiter oben alles schon geladen wurde...
ich habe wie du sagtest die Scripts lediglich kombiniert:

Code:

<script type="text/javascript">
$(document).ready(function(){
   $('a').attr('target', 'icontent');
   $('body').scrollTo('target', 'icontent');
});
</script>

LG Wolf

TecEye · 12. Aug. 2015

wenn dein iframe die id "icontent" hat dann so

Code:

<script type="text/javascript">
$(document).ready(function(){
   $('a').attr('target', 'icontent');
   $('body').scrollTo('#icontent');
});
</script>

th_wolfgang · 12. Aug. 2015

danke,

leider auch kein Erfolg, der bleibt stur stehen wo der Lins sitzt...

LG & Danke wolf

TecEye · 12. Aug. 2015

darf ich mal den rest sehen von deinem html? kann ja alles nicht sein, ansonsten mit ner fixen position
ach man denkfehler sorry, kannst ja kein scroll beim seitenaufruf laufen lassen

sondern erst wenn es getriggert wird

Code:

<script type="text/javascript">
$(document).ready(function(){
   $('a').attr('target', 'icontent');
   $('a').click(function(){ $('body').scrollTo('#icontent'); });
});
</script>

sorry

th_wolfgang · 12. Aug. 2015

danke Teceye

Ich packe mal die Standart Template hier rein...

Code:

<!DOCTYPE html>
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->
    <head>
<script type="text/javascript">
$(document).ready(function(){
   $('a').attr('target', 'icontent');
  $('body').scrollTo('target', 'icontent'); 
});
</script>

        <title>Titel</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- <BASE TARGET="CONTENT"> -->

<script type="text/javascript">
(function (root, factory) {
  var $ = root.jQuery;

  if (typeof define === 'function' && define.amd) {
    // AMD
    if ($) {
      define([], factory.bind(null, $));
    }
    else {
      define(['jquery'], factory);
    }
  } else if (typeof exports === 'object') {
    // Node, CommonJS-like
    if ($) {
      module.exports = factory($);
    }
    else {
      module.exports = factory(require('jquery'));
    }
  } else {
    // Browser globals (root is window)
    if ($) {
      root.setIframeHeight = factory($);
    }
    else {
      throw 'Missing required jQuery dependency';
    }
  }
}(this, function ($) {
  /************** EVENT BINDINGS **************/

  $(window).
    bind('setIframeHeight', onSetIframeHeight).
    bind('message', onMessage);


  /************** PUBLIC INTERFACE **************/

  var that = {
    setHeight: function(iframeSrc, height, iframeReferrer) {
      height = parseInt(height, 10);
      $(window).trigger('setIframeHeight', [{ iframeSrc: iframeSrc, height: height, iframeReferrer: iframeReferrer }]);
    }
  };

  var lastHeights = {};

  var _idCounter = 0;

  /************** PRIVATE VARS AND FUNCTIONS **************/

  function findIframeBySrc(src) {
    var bestMatchingIframe = null;

    $('iframe').each(function(idx, iframe) {

      var $iframe = $(iframe);
      var iframeSrc = $iframe.attr('data-iframeAutoHeight-currentSrc') || iframe.src;
      if (iframeSrc) {
        if (iframeSrc.indexOf('/') === 0) {
          iframeSrc = getHostForUrl(document.location.href) + iframeSrc;
        }
        if (iframeSrc === src) {
          bestMatchingIframe = iframe;
        }
      }

      if (!$iframe.data('setIframeHeight_id')) {
        $iframe.data('setIframeHeight_id', getNextId());
      }
    });

    return bestMatchingIframe;
  }

  function getNextId() {
    return ++_idCounter+'';
  }

  function getHostForUrl(url) {
    var matches = url.match(/https?:\/\/.[^/]+/) || [];
    return matches[0];
  }

  function onSetIframeHeight(e, data) {
    var iframe = findIframeBySrc(data.iframeSrc);

    if (!iframe && data.iframeReferrer) {
      iframe = findIframeBySrc(data.iframeReferrer);
    }
    if (iframe) {
      var $iframe = $(iframe);
      var $window = $(window);

      $iframe.height(data.height);
      $iframe.attr('data-iframeAutoHeight-currentSrc', data.iframeSrc);

      iframeId = $iframe.data('setIframeHeight_id');
      var lastHeight = lastHeights[iframeId];
      var height = data.height;
      if (lastHeight === undefined) {
        $window.trigger('setIframeHeight:determined', data);
      }
      else if (lastHeight > height) {
        $window.trigger('setIframeHeight:shrinked', data);
      }
      else if (lastHeight < height) {
        $(window).trigger('setIframeHeight:enlarged', data);
      }

      lastHeights[iframeId] = height;

      if (window.history.replaceState && $iframe.attr('data-iframeAutoHeight-deepLinkPattern')) {
        var parentUrl = $iframe.attr('data-iframeAutoHeight-deepLinkPattern').replace(/%deepLinkIframeSrc%/, encodeURIComponent(data.iframeSrc));
        if (document.location.href !== parentUrl) {
          window.history.replaceState({}, '', parentUrl);
          $(window).trigger('setIframeHeight:deepLink:changed', {
            childUrl: data.iframeSrc,
            parentUrl: parentUrl
          });
        }
      }
    }
  }

  function onMessage(e) {
    var data = e.originalEvent.data;
    if (data.indexOf('::')) {
      var data = data.split('::');
      if (data.length === 2 && data[0] === 'setIframeHeight') {
        var params = $.parseJSON(data[1]);
        that.setHeight(params.iframeSrc, params.height, params.iframeReferrer);
      }
    }
  }

  return that;
}));
</script>
<!-- iFrame Parent-->

<script>
jQuery(window)

  // triggered whenever the iframe got shrinked
  .on('setIframeHeight:shrinked', function (e, data) {
      console.log('iframe shrinked', data);
      window.scroll(0,0);
  })

  // triggered whenever the iframe got enlarged
  .on('setIframeHeight:enlarged', function (e, data) {
      console.log('iframe enlarged', data);
  })

  // triggered whenever the deep link is changed
  .on('setIframeHeight:deepLink:changed', function(e, data) {
    console.lg(data);
    
  })
</script>




        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Responsive shop for Phones</title>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <link rel="icon" type="image/ico" href="/favicon.ico" />
        <meta name="description" content="Smartphone Versand mit Händlerrabatten">
        <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <![endif]-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic%7CPT+Gudea:400,700,400italic%7CPT+Oswald:400,700,300' rel='stylesheet' id="googlefont">

        <link rel="stylesheet" href="/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/font-awesome.min.css">
        <link rel="stylesheet" href="/css/prettyPhoto.css">
        <link rel="stylesheet" href="/css/colpick.css">
        <link rel="stylesheet" href="/css/revslider_mc.css">
        <link rel="stylesheet" href="/css/owl.carousel.css">
        <link rel="stylesheet" href="/css/style.css">
        <link rel="stylesheet" href="/css/responsive.css">

<script type="text/javascript" src="/assets/wow.js"></script>
<script type="text/javascript" src="/assets/Countdown.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/animate.css">


        <!-- Favicon and Apple Icons -->
        <link rel="icon" type="image/png" href="/images/icons/icon.html">
        <link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-icon-57x57.html">
        <link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-icon-72x72.html">

        <!--- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script>
                <!--[if lt IE 9]>
                        <script src="/js/html5shiv.js"></script>
                        <script src="/js/respond.min.js"></script>
                <![endif]-->

                <style id="custom-style">

                </style>
<!-- Kopieren bitte -->
<!--========== Maus ==========-->
<!--script type="text/javascript">
    function taste (t) {
    if (!t)
      t = window.event;
      if ((t.type && t.type == "contextmenu") ||
        (t.button && t.button == 2) || (t.which && t.which == 3)) {
        if (window.opera)
          window.alert("Speichern nicht erlaubt.");
          return false;
      }
    }
    if (document.layers)
      document.captureEvents(Event.MOUSEDOWN);
      document.onmousedown = taste;
      document.oncontextmenu = taste;
   </script-->

<!--Ende Maus ==========-->

<!-- WOW Effekte-->
<script src="/js/wow.min.js"></script>
<script>
 new WOW().init();
</script>

<script>
    wow = new WOW(
      {
        animateClass: 'animated',
        offset:       100,
        callback:     function(box) {
          console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
        }
      }
    );
    wow.init();
    document.getElementById('moar').onclick = function() {
      var section = document.createElement('section');
      section.className = 'section--purple wow fadeInDown';
      this.parentNode.insertBefore(section, this);
    };
</script>
<!-- Ende WOW Effekte-->

    </head>
    <body>...

Komplett bekomme ich die nicht unter...

Der Text, den Sie eingegeben haben, besteht aus 89470 Zeichen und ist damit zu lang. Bitte kürzen Sie den Text auf die maximale Länge von 20000 Zeichen.

Evtl. noch der iFrame-Part: hoffe das geben die mir noch an Zeichen...:

Code:

<div class="container">
<SECTION>

<!--iFrame Test-->
<iframe id="icontent"  name="icontent" width="100%"  scrolling="no" 
src = "/index.php" >
</iframe>
<!--iFrame Test-->


<!--/div -->

</section>
</div>

LG und besten Dank Wolf

TecEye · 12. Aug. 2015

da ist noch der alte code drin, bitte den neuen versuchen

th_wolfgang · 12. Aug. 2015

Hallo,

den hatte ich bereits drin, der funktioniert leider auch nicht

LG wolf

Positionen bei Links

th_wolfgang

New member

TecEye

New member

th_wolfgang

New member

TecEye

New member

th_wolfgang

New member

TecEye

New member

th_wolfgang

New member

TecEye

New member

th_wolfgang

New member

TecEye

New member

th_wolfgang

New member

TecEye

New member

th_wolfgang

New member