在iframe上覆盖div [英] overlay div over iframe

查看:581
本文介绍了在iframe上覆盖div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在做一个类似于uservoice小部件的小部件,除了我想让页面的内容在iFrame而不是通过javascript显示小部件。
我如何可以有一个完整的页面(宽度/高度100%)iFrame与固定在浏览器左侧的div,一个例子(使用javascript而不是css / html)在这里: http://uservoice.com/demo

I'm making a widget similar to the uservoice widgets, except I want the content of the page to be in an iFrame rather than the widget appear via javascript. How can I have a full page (width/height 100%) iFrame with a div fixed to the left of the browser, an example (using javascript rather than css/html) is here: http://uservoice.com/demo

我想要该小部件出现

有任何想法吗?我不能让iFrame填充整个页面,也有顶部出现。我玩过z指数没有运气。代码示例:

Any ideas? I can't make the iFrame fill the entire page, and also have the appear on top. I've played with z-indexes to no luck. Code example:

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 

            <style>
            #widget {
                left: 0px;
                position: absolute;
                top: 50%;
                display: block;
                z-index:100001;
                width: 25px;
                }
            #content {
                z-index:1;
                }
            </style>
</head> 
<body> 
    <div id="widget"> 
    widget
    </div>


    <iframe frameborder="0" id="content" src="http://www.google.com/" width="100%" height="100%"></iframe> 
</body> 
</html>


推荐答案

如果您不加载跨域,只是加载使用jquery ajax调用
http://docs.jquery.com/Ajax/load

If you're not loading cross domain then you could just load in using jquery ajax call http://docs.jquery.com/Ajax/load

$(document).ready(function () {
    $("#content").load("page.html");
});

并替换您的iframe

and replace your iframe with

<div id="content"></div>

这篇关于在iframe上覆盖div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆