Html 剪掉一些 iframe 的 src 内容

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7183192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:14:53  来源:igfitidea点击:

Cutting out some of the iframe's src content

htmlcssiframe

提问by Nick Rolando

I want to display a page's content in my website using an iframe, but I want to "cut out" the header (top) portion of the page, leaving out its navigation bar, so the user can only see what is underneath it.

我想使用 iframe 在我的网站中显示页面的内容,但我想“剪掉”页面的标题(顶部)部分,省略其导航栏,因此用户只能看到它下面的内容。

Code:

代码:

<div id="content">
    <div style="height:800px;">
        <iframe id="optomaFeed" src="http://www.optomausa.com/company/press-releases/" scrolling="auto"
            frameborder="0" height="100%" width="100%"></iframe>
    </div>
</div> 

What are some ways I can go about doing this? Tyvm~

我有哪些方法可以做到这一点?tyvm~

回答by Nick Rolando

I figured out how to do it using css clipattribute:

我想出了如何使用 cssclip属性来做到这一点:

<div id="content">
    <div style="height:800px;">
        <iframe id="optomaFeed" src="http://www.optomausa.com/company/press-releases/" scrolling="no"
            frameborder="0" height="100%" width="100%" style="position:absolute; clip:rect(190px,1100px,800px,250px);
            top:-160px; left:-160px;"></iframe>
    </div>
</div>

回答by DaveRandom

If the nav bar container has an idyou could get a reference to it in javascript, then call parentNode.removeChild()on it. This would mean the nav bar would likely flash up for a second every time the page was changed within the iframe.

如果导航栏容器有一个,id您可以在 javascript 中获得对它的引用,然后调用parentNode.removeChild()它。这意味着每次在 iframe 中更改页面时,导航栏可能会闪烁一秒钟。

Alternatively, you could pass the loading of the iframe through a server-side script that loads it, strips out the HTML for the nav bar, then outputs the result. This would probably slow down the user's interaction with the page, since it would mean everything effectively required loading twice. If you are going to take this approach you would probably need to add a <base>tag so you don't break the CSS/JS.

或者,您可以通过加载 iframe 的服务器端脚本传递 iframe 的加载,去除导航栏的 HTML,然后输出结果。这可能会减慢用户与页面的交互,因为这意味着所有内容都需要加载两次。如果你打算采用这种方法,你可能需要添加一个<base>标签,这样你就不会破坏 CSS/JS。