文章标题

最新推荐文章于 2024-04-22 16:59:44 发布
原创 最新推荐文章于 2024-04-22 16:59:44 发布 · 284 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iframe-子页面

iframe 子页面获取父页面数据的方法

  • 首先说一下基本需求:
    一个父页面要调用多个 iframe 子页面，点击子页面的按钮，弹出模态框，输入数据点击确定，iframe子页面可以获取到模态框的数据。
    由于这里涉及到跨域问题，所以要搭建web服务器(这里不清楚的可以上网搜一下)。下面就直入主题了！

    1. 主页面 index.html
      <!DOCTYPE html>
      <html>
      　　<head>
      　　　<meta charset='utf-8'>
      　　　<title>iframe 主页面</title>
      　　　<style>
      　　　 .bg{
      　　　 　　background-color:black;
      　　　　　 opacity:0.5;
      　　　　　 height:100%;
      　　　　　 position:absolute;
      　　　　　 top:0;
      　　　　　 left:0;
      　　　　　 display:none;
      　　　　}
      　　　　.content{
      　　　　　　width:400px;
      　　　　　　height:400px;
      　　　　　　margin:200px 200px;
      　　　　　　background-color:#fff;
      　　　　　　padding:10px;
      　　　　　　text-align:center;
      　　　　　}
      　　　</style>
      　　</head>
      　　<body>
      　　<iframe class="newiframe" id='mainFrame' scrolling="no" src="iframe.html" width='600px' height='600px'></iframe>
      <!-- 模态框 -->
      　　<div class="bg" id="modal">
      　　　<div class="content">
      　　　　姓名：<input type="text" value=""><br />
      　　　　年龄：<input type="text" value=""><br />
      　　　　<button>提交</button>
      　　 </div>
      　<div>
      　</body>
      　　<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
      　　<script src="index.js"></script><script></script>
      </html>

    2. iframe 子页面
      <!DOCTYPE html>
      <html>
      　　<head>
      　　　　<meta charset='utf-8'>
      　　　　<title>index</title>
      　　</head>
      　　<body>
      　　　　<div>
      　　　　　　<p>iframe1</p>
      　　　　　　<p>iframe11</p>
      　　　　　　<button>click111</button><br/>
      　　　　</div>
      　　　　<div>
      　　　　　　<p>iframe2</p>
      　　　　　　<p>iframe21</p>
      　　　　　　<button>click222</button><br/>
      　　　　</div>
      　　　　<div>
      　　　　　　<p>iframe3</p>
      　　　　　　<p>iframe31</p>
      　　　　　　<button>click333</button><br/>
      　　　　</div>
      　　　　<div>
      　　　　　　<p>iframe4</p>
      　　　　　　<p>iframe41</p>
      　　　　　　<button>click444</button><br/>
      　　　　</div>
      　　　　<div>
      　　　　　　<p>iframe5</p>
      　　　　　　<p>iframe51</p>
      　　　　　　<button>click555</button>
      　　　　</div>
      　　</body>
      　　<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
      　　<script src="index.js"></script>
      </html>

    3. 公共的js文件 index.js
      (function(){
      　　　var index = {
      　　　　　fn:function(){
      　　　　　　var click = true;
      　　　　　　$('.bg .content').click(function(event){
      　　　　　　//阻止冒泡
      　　　　　　　　event.stopPropagation();
      　　　　　　　　click = false;
      　　　　　　})
      　　　　　　$('.bg button').on("click",function(){
      　　 　　//此处hide() 必须加时间
      　　　　$("#modal").hide(100);
      　　})
      　　　　　　if(click){
      　　　　　　$('.bg').on("click",function(){
      　　　　　　　　$(this).hide(100)
      　　　　　　})
      　　　　　}
      　　　　},
      　　　　iframe: function(){
      　　　　　　var _this;
      　　　　　　$("button").click(function(){
      　　　　　　　　_this = $(this);
      　　　　　　　　//改变主页面模态框的显示隐藏状态
      　　　　　　　　$('.bg',      window.parent.document).show();
      　　　　　　})
      　　　　　　$("button",      window.parent.document).click(function(){
      　　　　　　var data = {
      　　　　　　　　"name":$("input",      window.parent.document).eq(0).val(),
      　　　　　　　　"age":$("input",      window.parent.document).eq(1).val()
      　　　　　　};
      　　　　　　$(_this).siblings('p').eq(0).html(data['name']);
      　　　　　　$(_this).siblings('p').eq(1).html(data['age']);
      　　　　　　})
      　　　　}
      　　}
      　　index.fn();
      　　index.iframe();
      })()

PS: js文件要放在文档底部

Python 爬虫实战：高效抓取多篇含有关键词的文章标题和内容
专注于Python爬虫开发，分享爬虫技巧、项目实战与反爬经验，使用Scrapy、BeautifulSoup等工具，解决数据抓取难题。
07-26 2921
本文介绍了一个使用Python高效抓取含有关键词文章的爬虫方案。通过requests库获取网页内容，BeautifulSoup解析HTML结构，结合正则表达式筛选目标文章。文章详细说明了从单页到多页爬取的实现方法，包括关键词匹配、数据存储（CSV格式）以及防封禁的延时策略。该方案适用于数据分析、新闻采集等场景，为初学者提供了完整的爬虫实现流程，并建议进一步学习Selenium/Scrapy处理更复杂的动态页面需求。
Wordpress自定义函数控制文章标题长度
09-29
在WordPress中，文章标题的展示方式对于网站的整体布局和用户体验起着至关重要的作用。当文章标题过长时，可能会导致页面布局混乱或者视觉效果不佳，尤其是标题在首页以列表形式展示时。为了解决这个问题，我们可以...
父窗口获取iframe子页面的title
热门推荐
凡夫俗子
11-27 1万+
1.JS实现父窗口获取iframe的title var mainFrame=document.getElementById('main-frame'); mainFrame.contentWindow.document.title;//iframe中子页面的title 2.jquery实现父窗口获取iframe的title var $mainFrame=$(
iframe标签
qq_38966867的博客
07-02 604
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3.标题标签.html</title> </head> <body> <!-- 标题标签 需求1：演示标题1到 标题6的 h1 - h6 都是标题标签 h1 最大 h6 最小 align 属性是对齐属性 left 左对齐(默认) cente
iframe 将子页面的title显示在主页面中
weixin_30672295的博客
08-12 1739
在index界面中，在左侧导航栏的点击事件中添加以下代码 //导航栏点击跳转 $(".leftList .item ul").on('click', 'li', function (event) { var name = $(this).text(); $(document).attr('title',name); ...
文章标题编号分级
qq_38781075的博客
10-19 3443
一般适用于大标题一、二、三、
使用POI生成文章标题
Cloud的专栏
09-24 8930
生成文章标题有两种方式，一种是自定义标题，还有一种是使用现有样式来生成，现在网上大部分是第一种方式，但这种方式有很多弊端，我们先来看第一种 第一步，引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>3.9</version> </dependency>
织梦DEDE自带采集标题限制,解决文章标题字数长度方法
qq_43292127的博客
05-30 1540
文章标题的字数比较长，当文章发布之后，发现dedecms系统自动为标题进行了截字，只要发布的标题字数过多，就会只显示一部分，无法显示完整。所以需要修改一下文章的标题。那么如何修改呢？ 1、登录后台系统 系统 -> 系统基本参数 -> 其它选项 -> 文档标题最大长度 改此参数后需要手工修改数据表 修改为需要设置的标题最大长度，默认是60，也就是30个汉字，一般把60修改成90 。...
RiPro主题文章标题美化教程 WordPress美化教程
03-02
/*文章标题优化*/ .sjblog-avatar {  width: 50px;  float: left; } .sjblog-avatar img {  float: left;  width: 50px;  border-radius: 50%;  margin-right: 20px; } .sjblog-tgroup{ ...
精选资源
Python3 文章标题关键字提取的例子
01-20
1.读取所有文章标题； 2.用“结巴分词”的工具包进行文章标题的词语分割； 3.用“sklearn”的工具包计算Tf-idf（词频-逆文档率）; 4.得到满足关键词权重阈值的词 结巴分词详见：结巴分词Github sklearn详见：文本...
帝国CMS神器文章自动生成插件：自动生成文章标题和图片
02-25
帝国CMS神器文章自动生成插件是一款为帝国CMS内容管理系统打造的扩展工具，该插件的主要功能是实现文章标题的自动生成以及与之对应的图片的自动匹配或生成。这一功能对于需要大量文章内容发布的网站管理者来说，无疑...
AI自动改写文章标题和内容的WordPress插件
最新发布
05-12
随着自然语言处理技术的进步，AI自动改写文章标题和内容的需求应运而生，为内容创作者提供了强大的工具支持。WordPress作为世界上使用最广泛的网站构建平台之一，其插件生态系统不断扩展，为用户提供了丰富的功能...
如何在SEO中实现文章标题优化，提升网站排名和流量？
04-22 1686
一个吸引人的标题，不仅能够提升网站流量，还能有效提升用户体验，让搜索引擎更加友好。同时，在社交媒体平台上发布文章标题，也有助于提升文章在搜索引擎中的排名。1.关键词研究：在进行标题创作前，应进行关键词研究，了解用户搜索习惯，以便在标题中嵌入相关关键词，提升文章在搜索引擎中的排名。本文将深入探讨SEO中如何进行文章标题的优化，包括标题的重要性、标题的创作技巧以及如何利用标题提升网站排名和流量。4.互动性：鼓励用户参与互动，包括评论、分享等，提升用户体验，让搜索引擎认为文章具有价值，从而提升网站排名和流量。
获取iframe中子窗体的title
cychai的专栏
03-08 1万+
 当我们需要在父窗体中获取iframe中页面的title的时候，可以采用如下的方法：  页面html：   javascript :   var ifRemote = $("#FrameNav").get(0); if ($.browser.msie) { ifRemote.onreadystatechang
利用NLP技术自动生成简短文章标题的方法
在这个项目中，NLP用于生成文章标题，这涉及分析文章内容并从中提取关键信息来创建简短且相关性强的标题。 2. 循环神经网络（RNN）：循环神经网络是一种深度学习模型，特别适合处理序列数据，如文本、时间序列等。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值