将URL加载到CSS动画滑动iframe中

Load URL into CSS-animated sliding iframe

本文关键字：iframe 动画 CSS URL 加载      更新时间：2024-01-15

我想在css动画扩展iframe中打开一个链接

我的问题：当我点击链接时，href/url没有加载。我可以直接触发iframe的css动画。（也许js会覆盖href？）

在某个时候，我将请求分为两个测试链接：一个加载扩展iframe，另一个加载页面到现在可见的iframe中，这很有效。但一旦我把两个链接放在一起，url就不会加载。

我尝试了很多其他东西，搜索了很多jQuery插件，但还没有找到合适的解决方案。提前感谢您的帮助！

这是现场演示的小提琴：https://jsfiddle.net/10jew169/2/

这是滑动iframe:的css

 /*iframe styling*/
    #slideiniframe {
        height: 100%;
        position: fixed;
        border: none;
        margin: 0;
        top: 0;
        right: 0;
        background: url(img/preloader.gif) #d8d8d8 center no-repeat;
        max-width: 800px;
    }
    /*iframe animation*/
    .hide {
        overflow: hidden;
        width: 0%;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    }
    .show {
        transition-duration: 0.3s;
        -moz-transition-duration: 0.3s;
        -webkit-transition-duration: 0.3s;
        -o-transition-duration: 0.3s;
        transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -webkit-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        width: 50%;
        overflow: hidden;
    }

和主体的html用js/jquery激活css动画：

<!--article preview with two links to the iframe-->
<div class="post-content">
  <h2>The World's Coolest Passport Stamps</h2>
  <div class="body-text">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p><a class="read_more" href="http://travel-and-leisure-yahoopartner.tumblr.com/post/142022520144/the-worlds-coolest-passport-stamps" target="articleiframe">Keep reading</a></p>

<!--full article in iframe-->
<iframe id="slideiniframe" class="hide" name="articleiframe">
<p>Your browser does not support iframes.</p>
</iframe>
<!--slide in animated when clicked on link and hide when clicked elsewhere--> 
<script>
$('.read_more').click(function(){
    $('#slideiniframe').toggleClass('show').toggleClass('hide');
    return false;
});
$(window).ready(function(){
    $('html').click(function(){
    $('#slideiniframe').addClass('hide').removeClass('show');
     });
});
</script>

您需要将href值传递给iFrame的src属性。

$('.read_more').click(function() {
    $('#slideiniframe').prop('src', $(this).prop('href'))
    $('#slideiniframe').toggleClass('show').toggleClass('hide');
    return false;
});
相关文章：