Jquery iframe仅显示页面的某一部分

我正在制作iframe，我需要在一个iframe中显示页面的某个部分（比如，右上角），宽度约为300px，高度约为150px

示例：

假设我想在页面上放置一个iframe的www.mywebsite.com/portfolio.php，但将iframe调整为只显示右上方的“portfolio sports”部分

我怎样才能做到这一点

谢谢

编辑：

---

[感谢Pointy]

将iframe设置为适当的宽度和高度，并将滚动属性设置为“否”

如果所需区域不在页面的左上角，可以将内容滚动到相应区域。关于这个问题：

我相信只有当两个页面在同一个域上时，您才能滚动它。

一个

为您提供了一个完整的工作窗口。做你想做的事情最直接的方法是让你的服务器给你一个只包含你想显示的片段的完整页面

或者，您可以使用一个简单的

并使用jQuery“load”函数来加载整个页面并只提取您想要的部分：

$('#target-div').load('http://www.mywebsite.com/portfolio.php #portfolio-sports');

---

您可能还需要做其他事情，一个显著的区别是，内容将成为主页的一部分，而不是被隔离到单独的窗口中。

不知何故，我四处闲逛，了解了一些我是如何让它工作的：

<iframe src="http://www.example.com#inside" width="100%" height="100%" align="center" ></iframe>

我想这是第一次发布此代码，所以请分享它

<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; border: solid 2px #555; width:594px; height:332px;">
<div style="overflow: hidden; margin-top: -100px; margin-left: -25px;">
</div>
<iframe src="http://example.com/" scrolling="no" style="height: 490px; border: 0px none; width: 619px; margin-top: -60px; margin-left: -24px; ">
</iframe>
</div>
</div>

假设您使用iframe将可供公众使用但不属于您的内容导入到您的网站中，您可以始终使用页面锚定命令您将iframe加载到您希望加载的位置

首先，创建具有显示数据所需的宽度和高度的iframe

<iframe src="http://www.mygreatsite.com/page2.html" width="200px" height="100px"></iframe>

第二个安装插件，如Show Anchors 2 for Firefox，并使用它显示您希望在iframe中显示的页面上的所有页面锚。找到希望帧使用的定位点，并通过右键单击它来复制定位位置

（您可以在此处下载并安装插件=>）

第三，使用复制的带有锚点的网址作为iframe源。当框架加载时，它将显示从指定的定位点开始的页面

<iframe src="http://www.mygreatsite.com/page2.html#anchorname_1" width="200px" height="100px"></iframe>

---

这是精简指令列表。希望有帮助

我得到了这份工作

<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 736px;">
<iframe scrolling="no" src="http://www.w3schools.com/css/default.asp" style="border: 0px none; margin-left: -185px; height: 859px; margin-top: -533px; width: 926px;">
</iframe>
</div>

这对你有用还是不让我们知道

---

来源：

我需要一个iframe，它可以嵌入一个带有垂直滚动条的外部页面的一部分，裁剪出页面顶部和左侧的导航菜单。我可以用一些简单的HTML和CSS来完成

HTML

---

iframe与父页面在同一个域中吗？我认为使用

并不是正确的方法。谢谢。这正是我所看到的——“跳过iframe”。不确定，但如果加载的html包含一个POST表单，我不确定提交到服务器是否能正常工作，因为存在安全限制（同源策略）。@Paolo如果它是来自不同域的内容，那么

.load（）

除非源站点设置适当的CORS头，否则将无法工作。如果它真的加载了，那么一个帖子应该可以正常工作。真的，谢谢。我还是试过了，firebug说“跨源请求被阻止：同源策略不允许在读取远程资源。这可以通过将资源移动到同一域或启用CORS来解决。”请注意，这不会运行通过jQuery

load（）

从页面加载的任何脚本/样式。您必须使用

$.getScript

以及其他方法来处理此问题。请对您的解决方案添加一些注释，说明其解决问题的原因和方式。很抱歉，这没有任何作用。我认为这是正确的解决方案，已接受的答案不符合iframe的要求。完美的解决方案。非常感谢。在react js应用程序中滚动“否”对我不起作用最佳答案和解决方案我喜欢这个主意。我在我的网站中使用了它，工作很好，但每次目标网站更新内容时都需要更新。我认为这#内部应该是外部网站的一部分，不受我们的控制。

<div id="container">
    <iframe id="embed" src="http://www.example.com"></iframe>
</div>

<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;">