ลบเส้นขอบออกจาก IFrame

ฉันจะลบเส้นขอบออกจาก iframe ที่ฝังอยู่ในเว็บแอปได้อย่างไร ตัวอย่างของ iframe คือ:

<iframe src="myURL" width="300" height="300">Browser not compatible.</iframe>

ฉันต้องการเปลี่ยนจากเนื้อหาในหน้าของฉันไปเป็นเนื้อหาของ iframe ให้ราบรื่นโดยสมมติว่าสีพื้นหลังมีความสอดคล้องกัน เบราว์เซอร์เป้าหมายคือ IE6 เท่านั้นและน่าเสียดายที่โซลูชันสำหรับผู้อื่นจะไม่ช่วย

เพิ่มframeBorderแอตทริบิวต์ (หมายเหตุตัวพิมพ์ใหญ่ 'B' )

ดังนั้นมันจะมีลักษณะ:

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible.</iframe>

หลังจากบ้าไปแล้วพยายามที่จะลบเส้นขอบใน IE7 ฉันพบว่าคุณลักษณะ frameBorder เป็นกรณี ๆ ไป

คุณจะต้องตั้งแอตทริบิวต์ frameborder กับทุนB

<iframe frameBorder="0"></iframe>

ตามเอกสารประกอบiframe frameBorder จะถูกคัดค้านและใช้แอตทริบิวต์ CSS "border" เป็นที่ต้องการ:

<iframe src="test.html" style="width: 100%; height: 400px; border: 0"></iframe>

• หมายเหตุคุณสมบัติขอบของ CSS ไม่บรรลุผลลัพธ์ที่ต้องการใน IE6, 7 หรือ 8

นอกเหนือจากการเพิ่มแอตทริบิวต์ frameBorder คุณอาจต้องการพิจารณาตั้งค่าคุณลักษณะการเลื่อนเป็น "ไม่" เพื่อป้องกันไม่ให้แถบเลื่อนปรากฏขึ้น

<iframe src="myURL" width="300" height="300" frameBorder="0" scrolling="no">Browser not compatible. </iframe > 

สำหรับปัญหาเฉพาะเบราว์เซอร์ยังเพิ่มframeborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"ตาม Dreamweaver:

<iframe src="test.html" name="banner" width="300" marginwidth="0" height="300" marginheight="0" align="top" scrolling="No" frameborder="0" hspace="0" vspace="0">Browser not compatible. </iframe>

ใช้ HTML iframe frameborder Attribute

http://www.w3schools.com/tags/att_iframe_frameborder.asp

หมายเหตุ: ใช้คำสั่งframe B (cap B) สำหรับ IE มิฉะนั้นจะไม่ทำงาน แต่แอตทริบิวต์ iframe frameborder ไม่ได้รับการสนับสนุนใน HTML5 ดังนั้นใช้ CSS แทน

<iframe src="http://example.org" width="200" height="200" style="border:0">

คุณยังสามารถลบการเลื่อนโดยใช้คุณลักษณะการเลื่อน http://www.w3schools.com/tags/att_iframe_scrolling.asp

<iframe src="http://example.org" width="200" height="200" scrolling="no" style="border:0">

นอกจากนี้คุณยังสามารถใช้แอตทริบิวต์แบบไม่มีรอยต่อซึ่งเป็นของใหม่ใน HTML5 แอตทริบิวต์ที่ไร้รอยต่อของแท็ก iframe ได้รับการสนับสนุนใน Opera, Chrome และ Safari เท่านั้น เมื่อมีอยู่จะระบุว่า iframe ควรดูเหมือนเป็นส่วนหนึ่งของเอกสารที่มี (ไม่มีเส้นขอบหรือแถบเลื่อน) ณ ตอนนี้แอตทริบิวต์ที่ไร้รอยต่อของแท็กรองรับเฉพาะใน Opera, Chrome และ Safari แต่ในอนาคตอันใกล้นี้จะเป็นทางออกมาตรฐานและจะเข้ากันได้กับเบราว์เซอร์ทั้งหมด http://www.w3schools.com/tags/att_iframe_seamless.asp

คุณสามารถใช้style="border:0;"ในรหัส iframe ของคุณ นี่คือวิธีที่แนะนำในการลบเส้นขอบใน HTML5

ลองใช้เครื่องมือสร้าง html5 iframeของฉันเพื่อปรับแต่ง iframe ของคุณโดยไม่ต้องแก้ไขโค้ด

คุณสมบัติสไตล์สามารถใช้ สำหรับ HTML5 หากคุณต้องการลบ boder ของเฟรมของคุณหรืออะไรก็ได้ที่คุณสามารถใช้คุณสมบัติสไตล์ ตามที่ระบุไว้ด้านล่าง

รหัสไปที่นี่

<iframe src="demo.htm" style="border:none;"></iframe>

เพิ่มแอตทริบิวต์ frameBorder (ตัวพิมพ์ใหญ่ 'B')

<iframe src="myURL" width="300" height="300" frameBorder="0">Browser not compatible. </iframe>

คุณสามารถทำได้ด้วย JavaScript ด้วยวิธีนี้ จะพบองค์ประกอบ iframe ใด ๆ และลบเส้นขอบใน IE และเบราว์เซอร์อื่น ๆ (แม้ว่าคุณจะสามารถกำหนดรูปแบบของ "border: none;" ในเบราว์เซอร์ที่ไม่ใช่ IE แทนที่จะใช้ JavaScript) และมันจะทำงานแม้ว่าจะใช้งานหลังจากที่มีการสร้าง iframe และอยู่ในเอกสาร (เช่น iframe ที่ถูกเพิ่มใน HTML ธรรมดาไม่ใช่ JavaScript)!

สิ่งนี้ดูเหมือนจะใช้งานได้เนื่องจาก IE สร้างเส้นขอบไม่ใช่ในองค์ประกอบ iframe ตามที่คุณคาดหวัง แต่ในเนื้อหาของ iframe - หลังจากสร้าง iframe ใน BOM ($ @ & * # @ !!! IE !!!)

หมายเหตุ: ส่วน IE จะใช้งานได้ (แน่นอน) หากหน้าต่างหลักและ iframe มาจากแหล่งกำเนิดเดียวกัน (โดเมนเดียวกันพอร์ตโปรโตคอล ฯลฯ ) มิฉะนั้นสคริปต์จะได้รับข้อผิดพลาด "การเข้าถึงถูกปฏิเสธ" ในคอนโซลข้อผิดพลาด IE หากเป็นเช่นนั้นตัวเลือกเดียวของคุณคือการตั้งค่าก่อนที่มันจะถูกสร้างขึ้นตามที่คนอื่น ๆ จดไว้หรือใช้แอตทริบิวต์ frameBorder = "0" ที่ไม่ได้มาตรฐาน (หรือเพียงแค่ให้ IE ดู fugly - ตัวเลือกโปรดของฉันในปัจจุบัน))

ใช้เวลาหลายชั่วโมงในการทำงานจนถึงจุดที่สิ้นหวังเพื่อคิดออก ...

สนุก. :)

// =========================================================================
// Remove borders on iFrames

if (window.document.getElementsByTagName("iframe"))
   {
      var iFrameElements = window.document.getElementsByTagName("iframe");
      for (var i = 0; i < iFrameElements.length; i++)
         {
            iFrameElements[i].frameBorder="0";   //  For other browsers.
            iFrameElements[i].setAttribute("frameBorder", "0");   //  For other browsers (just a backup for the above).
            iFrameElements[i].contentWindow.document.body.style.border="none";   //  For IE.
         }
   }

ฉันลองทำตามข้างบนทั้งหมดแล้วและถ้านั่นไม่ได้ผลสำหรับคุณลอง CSS ด้านล่างแก้ปัญหาให้ฉันได้ ซึ่งเพิ่งบอกเบราว์เซอร์ที่จะไม่เพิ่มการขยายหรือขอบใด ๆ

* {
  padding:0px;
  margin:0px;
 }

หากประเภทของหน้าเว็บที่คุณกำลังวาง iframe บนคือ HTML5 คุณสามารถใช้seamlessคุณลักษณะดังนี้:

<iframe src="..." seamless="seamless"></iframe>

Mozilla เอกสารบนแอตทริบิวต์ที่ไร้รอยต่อ

ในสไตล์ชีทของคุณเพิ่ม

{
  padding:0px;
  margin:0px;
  border: 0px

}

นี่ยังเป็นตัวเลือกที่ทำงานได้

หากคุณใช้ iFrame ให้พอดีกับความกว้างและความสูงของหน้าจอทั้งหมดซึ่งฉันสมมติว่าคุณไม่ได้ใช้ขนาด 300x300 คุณต้องตั้งค่าระยะขอบของร่างกายเป็น "0" เช่นนี้:

<body style="margin:0px;">

<iframe src="mywebsite" frameborder="0" style="border: 0px solid white;">HTML iFrame is not compatible with your browser</iframe>

รหัสนี้ควรใช้ได้ทั้งใน HTML 4 และ 5

เพิ่มแอ็ตทริบิวต์ frameBorder หรือใช้ลักษณะที่มีความกว้างชายแดน 0px; หรือตั้งค่าลักษณะเส้นขอบให้เท่ากับ none

ใช้อย่างใดอย่างหนึ่งจากด้านล่าง 3:

<iframe src="myURL" width="300" height="300" style="border-width:0px;">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

<iframe src="myURL" width="300" height="300" style="border:none;">Browser not compatible.</iframe>

ตั้งค่า border = "0px" ด้วย

 <iframe src="yoururl" width="100%" height="100%" frameBorder="0"></iframe>

ลอง

<iframe src="url" style="border:none;"></iframe>

นี่จะเป็นการลบเส้นขอบของเฟรมของคุณ

ใช้สิ่งนี้

style="border:none;

ตัวอย่าง:

<iframe src="your.html" style="border:none;"></iframe>

ในการลบเส้นขอบคุณสามารถใช้คุณสมบัติ CSS border เป็น none

<iframe src="myURL" width="300" height="300" style="border: none">Browser not compatible.</iframe>

ง่าย ๆ เพียงแค่เพิ่มแอตทริบิวต์ใน iframe tag frameborder = 0 <iframe src="" width="200" height="200" frameborder="0"></iframe>

1.Via Inline Style set border: 0

 <iframe src="display_file.html" style="height: 400px; width:
   100%;border: 0;">HTML iFrame is not compatible with your browser
   </iframe>

2. ผ่านชุดคุณสมบัติแท็กของเฟรมชุดที่ 0

<iframe src="display_file.html" width="300" height="300" frameborder="0">Browser not compatible.</iframe>

3. ถ้าเรามีหลายเฟรมเราสามารถให้คลาสและใส่ css ในภายในหรือภายนอก

HTML:

<iframe src="display_file.html" class="no_border_iframe">
    HTML iFrame is not compatible with your browser 
</iframe>

CSS:

<style>
.no_border_iframe{
border: 0; /* or border:none; */
}
</style>

ฉันมีปัญหากับเส้นขอบสีขาวด้านล่างและฉันไม่สามารถแก้ไขได้ด้วยเส้นขอบระยะขอบ & ช่องว่างภายใน ... ดังนั้นเพิ่มdisplay:block;เพราะ iframe เป็นองค์ประกอบแบบอินไลน์

นี่เป็นการพิจารณาช่องว่างใน HTML ของคุณ

iframe src="XXXXXXXXXXXXXXX"
marginwidth="0" marginheight="0" width="xxx" height="xxx"

ทำงานร่วมกับ Firefox;)

<iframe src="URL" frameborder="0" width="100%" height="200">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe frameborder="1|0">

(OR)

<iframe src="URL" width="100%" height="300" style="border: none">Your browser 
does not support iframes.</iframe>

The <iframe> frameborder attribute is not supported in HTML5. Use CSS 
instead.