如何使用 angularjs 更改 iframe src

2024-05-05

<iframe src="{{url}}" width="300" height="600">
                <p>Your browser does not support iframes.</p>
            </iframe>

如何修改iframe的src


你还需要$sce.trustAsResourceUrl否则它不会打开 iframe 内的网站:

JSFiddle http://jsfiddle.net/michelem09/0mjkyke2/

HTML:

<div ng-app="myApp" ng-controller="dummy">
    <button ng-click="changeIt()">Change it</button>
    <iframe ng-src="{{url}}" width="300" height="600"></iframe>
</div>

JS:

angular.module('myApp', [])
    .controller('dummy', ['$scope', '$sce', function ($scope, $sce) {

    $scope.url = $sce.trustAsResourceUrl('https://www.angularjs.org');

    $scope.changeIt = function () {
        $scope.url = $sce.trustAsResourceUrl('https://docs.angularjs.org/tutorial');
    }
}]);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 angularjs 更改 iframe src 的相关文章

  • 如何在通过 .ajaxForm() 提交表单之前执行一些操作?

    我正在使用 ajaxForm 框架来发送我的数据 而无需重新加载我的页面 ReplayForm ajaxForm success function data alert Success 现在 我想在提交表单之前检查一些条件 如果条件为假 则
  • Angular 4 过滤器搜索自定义管道

    所以我试图构建一个自定义管道来在 ngFor 循环中执行多个值的搜索过滤器 我花了几个小时寻找一个好的工作示例 其中大多数都是基于以前的版本 并且似乎不起作用 所以我正在构建管道并使用控制台为我提供值 但是 我似乎无法显示输入文本 以下是我
  • 使用 Jest 和 React JS TestUtils 测试表单

    我有一个带有 3 个单选按钮的表单 如下所示 假名
  • 如果没有“new”,则无法调用类构造函数

    感谢这个问题已经被问过几次了 但是我遇到的几乎所有情况都是有人试图扩展非本地类的情况 我的情况有所不同 我有一个非常简单的基类 名为CObject如下 export class CObject extends BaseObject cons
  • Eslint 从另一个文件确定全局变量

    我试图以这样的方式设置 ESLint 使其在对实际目标文件进行 linting 之前解析全局声明文件 这样我就不必将所有确实是全局的函数和变量声明为全局 而是让解析器弄清楚 In 一些 模块 js function do something
  • 使用 jQuery Select2 清除下拉菜单

    我正在尝试使用奇妙的方式以编程方式清除下拉菜单Select2 http ivaynberg github com select2 图书馆 使用 Select2 远程 ajax 调用动态填充下拉列表query option HTML
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何知道在Angular JS中选择了哪个元素

    我制作了多个选定的弹出窗口 用户可以在其中选择多个值 我想在屏幕上打印所有选定的值或获取一个对象 其中包含用户选择的所有元素 我将换句话说 在我的演示中 我在屏幕上有一个按钮 单击按钮时 我会打开一个弹出窗口 其中有多个选定的元素我想获取用
  • jQuery输入文件点击方法和IE上拒绝访问

    我尝试仅使用一个按钮作为输入文件 它在 Firefox Chrome Safari 中工作正常 但在 IE 中不行 提交表单时我总是收到 访问被拒绝 的消息 代码 input file click 有真正的解决方法吗 我在谷歌上浪费了大约2
  • 此页面上的脚本导致 ie 运行缓慢

    问题就在标题中 IE 行为异常 并说有一个脚本运行缓慢 FF 和 Chrome 没有这个问题 我怎样才能找到问题所在 那个页面有很多JS 手动检查不是一个好主意 EDIT 这是我正在处理的一个项目的页面 但我需要一个工具来查找问题 End
  • API 使用令牌向 odoo 进行身份验证

    我想使用令牌从 Express 应用程序向 Odoo 进行身份验证 我在用odoo xmlrpc https www npmjs com package odoo xmlrpc连接 Odoo 的节点模块 我的快递应用程序 Odoo 要求 A
  • 如何在 Web 服务器上设置 gzip 压缩?

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我
  • 如何仅显示/隐藏此 bootstrapvue 表的第二列和第三列?

    下面的代码将显示 隐藏 a 中的所有列BootstrapVue桌子 代码的来源就是这里的答案 使用 bootstrap vue 组件和 bootstrap 3 动态显示 隐藏列 https stackoverflow com questio
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • Web组件中嵌套槽的内容不可见

    我有一个 Web 组件 它应该接受任意元素来包装其内容 虽然我可以在 Chrome 开发工具中看到插槽已正确分配 但 DOM 中什么也没有出现 以前有人见过这个问题吗 定义 class ExampleParent extends HTMLE
  • 如何在 webpack 中渲染嵌套的 SASS?

    采取以下CSS MyComponent color blue Button color red 以及以下 React 组件 import React from react import classes from MyComponent sc
  • 尝试使用 Javascript 解决对称差异

    我正在尝试找出对称的解决方案 使用 javascript 完成以下任务的差异 目标 接受未指定数量的数组作为参数 保留数组中数字的原始顺序 不删除单个数组中数字的重复项 删除数组中出现的重复项 因此 例如 如果输入是 1 1 2 6 2 3
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • d3.event.translate 在触摸设备的缩放上包含 NaN

    我使用 d3 为我的 svg 编写了一个自定义缩放函数 如下所示 Zoom behavior function myzoom xpos d3 event translate 0 ypos d3 event translate 1 vis a
  • 如何在运行脚本之前提交活动单元格中所做的更改? (Google 表格/Google Apps 脚本)

    我正在使用 Google Apps 脚本在 Google 表格中创建提交表单 该表单位于一页上 提交内容被移至第二个隐藏页面 当用户填写表单后 他们按下提交页面上的按钮以激活脚本 我遇到的问题是 当用户填写最后一个单元格然后单击按钮时 输入

随机推荐

  • 通过 const 成员的引用传递时尝试引用已删除的函数

    我显然错过了一些东西 如果我有 class MyClass public const int something MyClass int Something something something 这将失败 尝试引用已删除的函数 因为我没有
  • 如何启动 VBS 的交互式控制台?

    与这个问题非常相似 如何启动 Perl 的交互式控制台 https stackoverflow com questions 73667 how can i start an interactive console for perl 我只是希
  • 如何使用正则表达式替换匹配的组值

    我想修改连接字符串中 数据源 组件的值 我正在考虑以下解决方案 使用这个正则表达式模式 data source w 1 w 我可以获得以下字符串匹配 Match Groups 0 Value data source MY PC SQLEXP
  • GCD获取队列名称/标签

    如何获取当前队列名称 我的意思是队列标签com example myqueue 在 Xcode 4 调试器中我只能看到 block invoke 1 怎么样dispatch queue get label http developer ap
  • 运行时 SQL 查询生成器

    我的问题类似于 Java中有什么好的动态SQL生成器库吗 https stackoverflow com questions 5620985 is there any good dynamic sql builder library in
  • aspnet webforms禁用提交按钮

    我在 Webforms 中遇到一个小问题 我正在尝试禁用提交时的提交按钮 以防止重复发布 问题是 如果在回发期间禁用提交按钮 则不会调用代码隐藏中的 onclick 方法 回发仍然发生 但按钮 onclick 方法不会被调用 有办法解决这个
  • 如何设计多租户mysql数据库[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 假设我需要设计一个数据库来托管多个公司的数据 现在 出于安全和管理目的 我需要确保不同公司的数据正确隔离 但我也不想启动 10 个 m
  • 如何使用 ASP.NET Core 进行流式传输

    如何在 ASP NET Core 中正确传输响应 有一个像这样的控制器 更新的代码 HttpGet test public async Task GetTest HttpContext Response ContentType text p
  • WCF服务契约上的数据注释

    我有一个 WCF 服务 其中定义了一个 DataContract 类 每个属性都有 DataMember 属性 并且我已向其中几个属性添加了几个数据注释属性 Required 和 StringLength 然后 我在 ASP NET MVC
  • Javascript 中左侧的可选链接

    是否可以使用可选链接 https developer mozilla org en US docs Web JavaScript Reference Operators Optional chaining运算符位于赋值的左侧 在 JavaS
  • 为 UILabel 设置不同字体的问题

    我想将字体大小和姓氏设置为 titleLabel Helvetica Neue UltraLight titleLabel setFont UIFont fontWithName Helvetica Neue UltraLight size
  • 如何允许Windows Server上的MySQL进行外部远程访问?

    我已经在我的 Windows Server 2008 R2 上安装了 xampp 我在那里运行一个脚本来存储当天的数据 现在我想通过 mysql connect hostname username pw 连接数据库从我自己的计算机或外部检索
  • 绝对定位的元素如何在没有任何 z-index 的情况下与后续/下一个元素重叠?

    请看我的fiddle http jsfiddle net CNKsx here 我试图了解绝对定位的 红色六边形 图标如何在没有 z index 的情况下与 input textarea 元素重叠
  • 如何在android aidl 文件中返回MyObject 列表?

    我的 aidl 文件中有这个方法 void getObjects out List
  • 如何从 colorbox 获取返回值?

    我有一个颜色框 可以让用户选择图像 如何从颜色盒中获取文件名 我注意到onClosed功能 解决方案 正如 Gummy 所建议的 我使用了 onComplete 函数 如以下代码所示 返回 页面
  • 如何找到哪个 rspec 测试花费了这么长时间

    我们的一个 或几个 测试花费了很长时间 我们希望对其进行优化 我们已经进行了 1000 次测试 因此对我来说运行每个文件是不切实际的 有没有一种简单的方法可以找到慢的 这是 rspec 1 3 在 RSpec 2 和 3 中 您可以使用 p
  • 如何让图片在div中居中?

    我的 HTML 代码如下所示 div class ctn img src some img jpg div The ctn应该是固定大小 例如 150 150 但 IMG 的尺寸可能更大或更小 200 50 50 200 50 50 等 如
  • 非聚合查询内部的聚合情况

    我有一个相当大的查询 其最简单的形式如下所示 select r rep id u user id u signup date pi application date pi management date aum from table1 r
  • Flutter 中的 SharedPreferences 错误

    我正在使用shared preferences我的 Flutter 应用程序中的插件 从某个时刻开始 可能是在 Flutter 升级之后 它开始抛出异常 E flutter 27778 ERROR topaz lib tonic loggi
  • 如何使用 angularjs 更改 iframe src

    p Your browser does not support iframes p 如何修改iframe的src 你还需要 sce trustAsResourceUrl否则它不会打开 iframe 内的网站 JSFiddle http js