iframe

पर ओवरले div मैं uservoice विगेट्स के समान विजेट बना रहा हूं, सिवाय इसके कि मैं पृष्ठ की सामग्री जावास्क्रिप्ट के माध्यम से विजेट के बजाय iFrame में होना चाहता हूं। मैं कैसे एक div ब्राउज़र के बाईं, एक उदाहरण के लिए निर्धारित के साथ एक पूरा पृष्ठ (चौड़ाई/ऊंचाई 100%) iFrame हो सकता है (का उपयोग कर जावास्क्रिप्ट बल्कि सीएसएस/HTML की तुलना में) यहाँ है: http://uservoice.com/demo iframe

मुझे लगता है कि विजेट चाहते हैं पृष्ठ पर मूल रूप से दिखाई देने के लिए, और सामग्री iFrame के माध्यम से लोड किया जाना चाहिए।

कोई विचार? मैं आईफ्रेम पूरे पृष्ठ को भर नहीं सकता, और शीर्ष पर दिखाई देता हूं। मैंने ज़ेड-इंडेक्स के साथ कोई भाग्य नहीं खेला है। कोड उदाहरण:

<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>

स्रोत

2010-01-19 Peter Clark

मैंने उबंटू पर ff3.5.7 का उपयोग करके अपने कोड का परीक्षण किया और ऐसा लगता है कि यह ठीक काम करता है। आप किस सेटअप का उपयोग कर रहे हैं? – Flatlin3

जेड-इंडेक्स चीज iframes पर काम नहीं करती है। – Michael

आपको क्रॉस-डोमेन लोड नहीं रहे हैं तो आप सिर्फ jQuery ajax कॉल का उपयोग कर http://docs.jquery.com/Ajax/load

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

में लोड और

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

स्रोत

2010-01-19 16:18:13

शानदार और आसान –

के साथ अपने आइफ्रेम बदल सकते आप शायद मार्जिन जोड़ने की जरूरत है: ऑटो; अपने आईफ्रेम या फ़्लोटिंग div के लिए। इससे यह स्क्रीन 100% भर जाएगी।

उदाहरण:

.width { 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    width:250px; 
    height:150px; 
    margin:auto; 
}

ब्राउज़र के बाईं ओर इसे ठीक करने के लिए आप उपयोग कर सकते हैं:

margin:auto auto auto 0;

गुड लक!

स्रोत

2010-01-20 21:05:59 Joshua

यहोशू: धन्यवाद आदमी, यह काम किया :) – Gendaful

आप अपने आईफ्रेम को एक कम जेड-इंडेक्स के साथ एक div में लपेट सकते हैं और उसके बाद एक उच्च जेड-इंडेक्स के साथ एक div डाल सकते हैं।

स्रोत

2010-02-02 05:10:54 wilwaldon

कोशिश की कि एक यूट्यूब वीडियो iframe के साथ, और यह काम नहीं किया। –

ओपेरा, फ़ायरफ़ॉक्स और रेकोनक पर परीक्षण किया गया। काम नहीं करता। – Michael

यह केवल काम करेगा कि आपको दोनों तत्वों के लिए सीएसएस में स्थिति को पूर्ण करने की आवश्यकता है। :) –

यह "clickjacking" है, है ना?

कुछ भी लंबे समय तक काम करने की संभावना नहीं है, क्योंकि ब्राउज़र (सही रूप से) इसे रोकने के लिए सुरक्षा खतरे के रूप में देखते हैं।

स्रोत

2010-02-03 16:20:57 brianary

यह मेरे लिए काम किया:

एक उच्च z- सूचकांक और निरपेक्ष स्थिति
आइफ्रेम भी निरपेक्ष तैनात कर
एक div अंदर आइफ्रेम जोड़ने के साथ ओवरले div जोड़ने

ओवरले के साथ div:

<div style="z-index:99;position:absolute;top:0;right:0"> 
    ...overlay html... 
</div>

आइफ्रेम:

<style> 
    iframe { 
    position: absolute; 
    border: none; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    } 
</style> 
<div> 
    <iframe src="http://..."> </iframe> 
</div>

स्रोत

2014-12-02 11:51:24 miraculixx

इस कोड के साथ

मैं सही पर सही पर एक डबल स्क्रॉलबार मिलता है। वेबसाइट के लिए एक और आई-फ्रेम के लिए एक।

<style> 
    iframe { 
    position: absolute; 
    border: none; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    } 
</style> 
<div> 
    <iframe src="http://..."> </iframe> 
</div>

स्रोत

2016-10-26 10:23:52

उत्तर

संबंधित मुद्दे