CN111259381A - 页面交互方法、装置、计算机可读介质及电子设备 - Google Patents
页面交互方法、装置、计算机可读介质及电子设备 Download PDFInfo
- Publication number
- CN111259381A CN111259381A CN202010079852.XA CN202010079852A CN111259381A CN 111259381 A CN111259381 A CN 111259381A CN 202010079852 A CN202010079852 A CN 202010079852A CN 111259381 A CN111259381 A CN 111259381A
- Authority
- CN
- China
- Prior art keywords
- page
- target
- party
- element information
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000003993 interaction Effects 0.000 title claims abstract description 97
- 238000000034 method Methods 0.000 title claims abstract description 51
- 230000000694 effects Effects 0.000 claims abstract description 37
- 244000035744 Hura crepitans Species 0.000 claims abstract description 16
- 230000007246 mechanism Effects 0.000 claims abstract description 16
- 238000013515 script Methods 0.000 claims description 21
- 238000006243 chemical reaction Methods 0.000 claims description 13
- 230000004044 response Effects 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 9
- 238000004883 computer application Methods 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 15
- 230000006870 function Effects 0.000 description 13
- 238000004891 communication Methods 0.000 description 6
- 230000002452 interceptive effect Effects 0.000 description 5
- 230000003287 optical effect Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 230000009471 action Effects 0.000 description 2
- 230000008901 benefit Effects 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 239000000835 fiber Substances 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 230000003252 repetitive effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/50—Monitoring users, programs or devices to maintain the integrity of platforms, e.g. of processors, firmware or operating systems
- G06F21/52—Monitoring users, programs or devices to maintain the integrity of platforms, e.g. of processors, firmware or operating systems during program execution, e.g. stack integrity ; Preventing unwanted data erasure; Buffer overflow
- G06F21/53—Monitoring users, programs or devices to maintain the integrity of platforms, e.g. of processors, firmware or operating systems during program execution, e.g. stack integrity ; Preventing unwanted data erasure; Buffer overflow by executing in a restricted environment, e.g. sandbox or secure virtual machine
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Computer Security & Cryptography (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Hardware Design (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开提供一种页面交互方法、页面交互装置、计算机可读介质及电子设备;涉及计算机应用技术领域。该页面交互方法包括:响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面;通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息;基于所述页面元素信息确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。本公开中的页面交互方法能够在一定程度上克服第三方页面嵌入造成用户体验不好的问题,进而提升页面的交互效果。
Description
技术领域
本公开涉及前端技术领域,具体而言,涉及一种页面交互方法、页面交互装置、计算机可读介质及电子设备。
背景技术
为了提高平台功能的丰富性,满足用户的需求,大部分的平台都需要接入第三方平台,例如,在电子商务平台中接入一商品页面、在社交媒体平台接入一第三方系统页面等。
目前平台接入第三方主要是通过将第三方页面的相关代码以及事件绑定至父页面,在父页面显示该第三方页面的信息,但是直接将代码绑定至父页面会对父页面造成污染,存在安全隐患。为了不对父页面造成污染可以通过iframe嵌入的方法在父页面嵌入第三方页面,但是嵌入的第三方页面中的所有交互效果只能显示在该iframe页面区域,如果超出该区域则无法显示,影响用户体验。
需要说明的是,在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解,因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。
发明内容
本公开的目的在于提供一种页面交互方法、页面交互装置、计算机可读介质及电子设备,能够在一定程度上克服第三方页面嵌入时造成的用户交互体验差的问题,进而提升交互体验。
本公开的其他特性和优点将通过下面的详细描述变得显然,或部分地通过本公开的实践而习得。
根据本公开的第一方面,提供一种页面交互方法,包括:
响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面;
通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息;
基于所述页面元素信息确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。
在本公开的一种示例性实施例中,所述通过所述嵌入请求获取所述第三方页面的页面元素信息,包括:
通过所述嵌入请求获取所述第三方页面发送的字符串信息;
对所述字符串信息进行格式转换,以获得所述页面元素信息。
在本公开的一种示例性实施例中,所述对所述字符串信息进行格式转换,以获得所述页面元素信息,包括:
检测所述字符串信息中包含的目标字符串;
将所述目标字符串转换成可执行脚本,以获取所述页面元素信息。
在本公开的一种示例性实施例中,所述将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息,包括:
根据所述页面元素信息确定所述第三方页面的显示样式;
将所述显示样式与所述目标页面进行关联,以按照所述显示样式显示所述目标页面。
在本公开的一种示例性实施例中,所述基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,包括:
基于所述页面元素信息确定用户操作指令;
通过所述第三方页面响应所述用户操作指令,以控制所述目标页面的交互效果。
在本公开的一种示例性实施例中,所述基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,包括:
根据所述页面元素信息确定所述目标页面中的待显示元素,以及事件信息;
通过所述待显示元素以及所述事件信息确定所述目标页面的交互效果。
在本公开的一种示例性实施例中,所述待显示元素包括弹窗,所述基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,包括:
根据所述事件信息在所述目标页面中显示所述弹窗;
响应用户对于所述弹窗的移动操作,在所述目标页面中移动所述弹窗。
根据本公开的第二方面,提供一种页面交互装置,请求响应模块、页面确定模块以及交互模块,其中:
请求响应模块,用于响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面;
页面确定模块,用于通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息;
交互模块,用于基于所述页面元素信息确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。
在本公开的一种示例性实施例中,页面确定模块可以包括信息获取单元以及信息转换单元,其中:
信息获取单元,用于通过所述嵌入请求获取所述第三方页面发送的字符串信息。
信息转换单元,用于对所述字符串信息进行格式转换,以获得所述页面元素信息。
在本公开的一种示例性实施例中,信息转换单元可以包括字符串检测单元以及脚本转换单元,其中:
字符串检测单元,用于检测所述字符串信息中包含的目标字符串。
脚本转换单元,用于将所述目标字符串转换成可执行脚本,以获取所述页面元素信息。
在本公开的一种示例性实施例中,页面确定模块可以包括显示样式确定单元以及页面显示单元,其中:
显示样式确定单元,用于根据所述页面元素信息确定所述第三方页面的显示样式。
页面显示单元,用于将所述显示样式与所述目标页面进行关联,以按照所述显示样式显示所述目标页面。
在本公开的一种示例性实施例中,交互模块可以包括指令确定单元以及交互控制单元,其中:
指令确定单元,用于基于所述页面元素信息确定用户操作指令。
交互控制单元,用于通过所述第三方页面响应所述用户操作指令,以控制所述目标页面的交互效果。
在本公开的一种示例性实施例中,交互模块可以包括事件确定单元以及交互效果确定单元,其中:
事件确定单元,用于根据所述页面元素信息确定所述目标页面中的待显示元素,以及事件信息。
交互效果确定单元,用于通过所述待显示元素以及所述事件信息确定所述目标页面的交互效果。
在本公开的一种示例性实施例中,交互模块可以包括弹窗显示单元以及弹窗控制单元,其中:
弹窗显示单元,用于根据所述事件信息在所述目标页面中显示所述弹窗。
弹窗控制单元,用于响应用户对于所述弹窗的移动操作,在所述目标页面中移动所述弹窗。
根据本公开的第三方面,提供一种电子设备,包括:处理器;以及存储器,用于存储所述处理器的可执行指令;其中,所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的方法。
根据本公开的第四方面,提供一种计算机可读介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任意一项所述的方法。
本公开示例性实施例可以具有以下部分或全部有益效果:
在本公开的一示例实施方式所提供的页面交互方法中,通过沙箱机制确定目标页面,然后通过目标页面接收第三方页面的页面元素信息,目标页面能够对第三方页面的信息进行隔离,可以避免第三方页面对系统的代码造成污染,能够提高系统的安全性;并且,第三方页面的页面元素信息通过目标页面进行显示,在实现第三方页面的显示的同时,能够避免页面元素信息受到第三方的限制,提高页面交互的灵活性;此外,第三方的页面元素能够在目标页面的各个区域产生交互效果,从而可以提高用户体验。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理。显而易见地,下面描述中的附图仅仅是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示意性示出了根据本公开的一个实施例的页面交互方法的流程图;
图2示意性示出了根据本公开的另一个实施例的页面交互方法的流程图;
图3示意性示出了根据本公开的一个实施例的页面交互方法流程图;
图4示意性示出了根据本公开的另一个实施例的页面交互方法流程图;
图5示意性示出了根据本公开的一个实施例的页面交互方法流程图;
图6示意性示出了根据本公开的一个实施例的页面交互装置的框图;
图7示意性示出了根据本公开的一个实施例的用于实现页面交互方法的系统架构图;
图8示出了适于用来实现本公开实施例的电子设备的计算机系统的结构示意图。
具体实施方式
现在将参考附图更全面地描述示例实施方式。然而,示例实施方式能够以多种形式实施,且不应被理解为限于在此阐述的范例;相反,提供这些实施方式使得本公开将更加全面和完整,并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中,提供许多具体细节从而给出对本公开的实施方式的充分理解。然而,本领域技术人员将意识到,可以实践本公开的技术方案而省略所述特定细节中的一个或更多,或者可以采用其它的方法、组元、装置、步骤等。在其它情况下,不详细示出或描述公知技术方案以避免喧宾夺主而使得本公开的各方面变得模糊。
此外,附图仅为本公开的示意性图解,并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分,因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体,不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体,或在一个或多个硬件模块或集成电路中实现这些功能实体,或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。
以下对本公开实施例的技术方案进行详细阐述:
本示例实施方式首先提供一种页面交互方法。参考图1所示,该页面交互方法可以包括以下步骤:
步骤S110:响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面。
步骤S120:通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息。
步骤S130:基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。
在本公开的示例实施方式所提供的页面交互方法中,通过沙箱机制确定目标页面,然后通过目标页面接收第三方页面的页面元素信息,目标页面能够对第三方页面的信息进行隔离,可以避免第三方页面对系统的代码造成污染,能够提高系统的安全性;并且,第三方页面的页面元素信息通过目标页面进行显示,在实现第三方页面的显示的同时,能够避免页面元素信息受到第三方的限制,提高页面交互的灵活性;此外,第三方的页面元素能够在目标页面的各个区域产生交互效果,从而可以提高用户体验。
下面,对于本示例实施方式的上述步骤进行更加详细的说明。
在步骤S110中,响应第三方页面的嵌入请求,通过沙箱机制确定对于第三方页面的目标页面。
其中,沙箱机制指的是在隔离环境中运行的程序,该程序与系统的其他程序之间互相独立,不会对系统产生影响,并且不能访问系统的资源,从而消除了对系统的安全危害。第三方页面指的是第三方平台的图形用户界面,第三方平台可以通过发送嵌入请求将第三方页面嵌入至当前平台的目标页面中。嵌入请求可以指第三方平台发送至目标页面的消息,例如http消息等,其中可以包括第三方页面的标识信息,例如,第三方页面的URL(Uniform Resource Locator,统一资源定位符)、第三方页面的标识号等;或者,也可以包括其他信息,例如,第三方页面的域名信息等,本实施方式对此不做特殊限定。
在当前平台开发时可以预先预留一页面作为目标页面,也可以在接收到第三方页面的嵌入请求时,在当前平台中生成一新页面作为目标页面。为了使得目标页面不对当前平台的其他页面造成影响,目标页面可以通过沙箱机制生成,实现沙箱机制的方式可以包括多种,例如通过html中的iframe标签生成一个目标页面,从而使得该目标页面具有沙箱机制,或者通过容器技术生成具有沙箱机制的目标页面等。示例性的,在接收到第三方页面的嵌入请求时,可以生成一iframe页面作为目标页面,iframe能够将其指向的页面与其他页面进行隔离,使得iframe页面的脚本与其他页面的脚本不会互相影响,从而保证当前平台的安全性。
在步骤S120中,通过嵌入请求获取第三方页面的页面元素信息,并将页面元素信息与目标页面进行关联,以在目标页面中显示页面元素信息。
第三方页面的页面元素信息可以指第三方页面的属性信息,具体可以包括第三方页面中包含的图形信息、文字信息,也可以包括第三方页面中包含的组件信息,例如,按钮、输入框等。此外,页面元素信息还可以包括第三方页面代码信息,或者显示第三方页面所需的其他信息,例如html内容、css样式等。第三方页面可以将需要嵌入的内容通过嵌入请求发送至目标页面中,通过对嵌入请求进行解析可以获取包含的页面元素信息;或者,可以通过嵌入请求获取第三方页面的标识信息,然后通过该标识信息获取第三方页面的页面元素信息。获取到的页面元素信息可以作为目标页面的信息与目标页面进行关联,也就是说,得到页面元素信息后可以将其设置为目标页面对应的属性信息,例如,页面元素信息为第三方页面的高度以及宽度,则将该高度与宽度设置为目标页面的高度与宽度,再例如,页面元素信息为第三方页面的样式,则将该样式设置为目标页面的样式。因此,在显示目标页面时可以显示页面元素信息,并且,页面元素信息能够直接基于目标页面进行显示,不再收到第三方页面的限制,能够具有更加灵活的交互效果。
示例性的,获取页面元素信息的方法可以包括步骤S201以及步骤S202,如图2所示,其中:
在步骤S201中,通过嵌入请求获取第三方页面发送的字符串信息。第三方页面可以将需要嵌入的内容转换成字符串,作为嵌入请求的参数,例如,第三方页面将弹窗、遮罩、html内容、css样式以及JavaScript脚本转成字符串,然后通过postmessage接口发送给当前平台,该接口发送的消息可以作为嵌入请求,因此,接收到该嵌入请求时可以获取该嵌入请求中包含参数,从而得到字符串信息。示例性的,Function.prototype.toString方法能够将脚本转换成字符串,因此第三方页面的脚本可以通过该方法转成字符串。
在步骤S202中,对字符串信息进行格式转换,以获得页面元素信息。格式转换可以指转换字符串信息的数据格式,例如,将字符串格式转换为可执行代码的格式、将字符串格式转换为数字格式或者二进制格式等。示例性的,字符串信息中可以包括多个字符串,可以确定出其中需要进行转换的目标字符串,具体的,如图3所示,该方法可以包括以下步骤S301以及步骤S302,具体的:
在步骤S301中,检测字符串信息中包含的目标字符串。目标字符串指的是符合预设要求的字符串,根据实际情况可以与第三方平台进行预先约定一特定格式,从而将符合该特定格式的字符串确定为目标字符串,或者可以确定一标记,将包含该标记的字符串作为目标字符串。举例而言,在第三方发送嵌入请求时可以将需要转换格式的数据通过约定的字符进行标记,例如通过“{}”进行标记等,从而可以将包含标记的字符串作为目标字符串。并且,目标字符串可以包括多个,每个目标字符串可以对应不同的转化格式,例如,一目标字符串对应的转换格式为可执行脚本,另一目标字符串对应的转化格式为链接等。
在步骤S302中,将目标字符串转换成可执行脚本,以获得页面元素信息。示例性的,第三方页面可以将脚本信息用function(){}包住,再通过Function.prototype.toString方法转换成字符串,并对该字符串进行标记作为目标字符串,然后发送至目标页面,目标页面在接收到字符串信息后获取该标记的目标字符串,然后再将该目标字符串转换成可执行脚本,例如,假如目标字符串为fnString,则可以通过newFunction('return'+fnString)()或者eval('var fn='+fnString)转成脚本代码。本实施方式中,通过将第三方页面的执行脚本转换成字符串,然后再在目标页面显示时重新将该字符串信息转换成目标页面的可执行脚本,从而可以将第三方页面的交互功能转换至目标页面执行,不仅能够实现第三方页面的功能,并且能够使得第三方页面具有当前平台的页面体验,从而改善页面嵌入的交互效果。
需要理解的是,第三方页面与目标页面之间不仅可以通过字符串传递信息,也可以通过其他数据类型进行通信,例如,获取第三方页面发送的数据对象,通过该数据对象获取页面元素信息等,这些均属于本公开的保护范围。
示例性的,第三方平台还可以将显示样式作为页面元素信息发送至目标页面,从而使得目标页面按照该显示样式进行显示。具体的,可以对页面元素信息进行解析获取页面元素信息中包含的多个参数,从而确定显示样式对应的参数,然后将该参数与目标页面进行关联,从而在目标页面显示时能够按照该显示样式进行显示。
在步骤S130中,基于页面元素信息,确定目标页面的交互效果,以完成第三方页面的嵌入。
将第三方页面的页面元素信息与目标页面进行关联后,可以将页面元素信息中需要进行显示的信息,例如组件、图片、文字等显示在目标页面中,供用户进行浏览、点击、移动等多种交互操作。并且,页面元素信息中还可以包括第三方页面的交互事件信息,该交互事件能够在目标页面显示时监听目标页面上的用户输入,从而接收用户对于目标页面中各个元素的用户操作指令,例如,用户操作指令可以包括点击按钮,拖动弹窗等。确定了用户操作指令可以将用户操作指令发送至第三方页面,从而通过第三方页面确定对于用户操作指令的响应,执行相关的响应操作实现目标页面的交互效果。本实施方式中,第三方页面需要嵌入时,将第三方页面的内容显示在目标页面中,通过目标页面实现第三方页面的交互,从而完成第三方页面的嵌入,由于目标页面是当前平台下的一个密闭的沙箱,即使第三方页面发送恶意代码也不会影响当前平台,能够降低安全风险,提高平台的安全性。
示例性的,确定目标页面的交互效果的方法可以具体包括以下步骤S401以及步骤S402,如图4所示,其中:
在步骤S401中,根据所述页面元素信息确定所述目标页面中的待显示元素,以及事件信息。其中,待显示元素可以包括组件信息,例如文本框、按钮、列表等,还可以包括其他信息,例如图片、文字等;事件信息可以包括各种事件,例如点击事件、拖拽事件、触摸事件等。具体的,可以从页面元素信息中将待显示元素以及事件解析出来,例如,通过页面元素信息中各个参数的类型或者标签,将各个参数确定为待显示元素或者事件,从而可以得到目标页面中包含的待显示元素以及事件信息。
在步骤S402中,通过待显示元素和事件信息确定目标页面的交互效果。具体的,每一事件信息中可以定义一种交互效果,例如,点击事件可以为点击按钮时保存数据、点击特定区域时关闭或打开一窗口等,并且,通常一事件信息可以与一待显示元素对应,例如点击事件可以对应一按钮、输入事件可以对应一文本框、拖拽事件可以对应一图标等。举例而言,如果待显示元素为一文本框的信息,则通过事件信息可以获取用户输入到该文本框中的文本信息;如果待显示元素为遮罩,则可以在特定的事件信息被触发时确定目标页面的遮罩效果。
示例性的,待显示元素可以包括弹窗,则目标页面的交互效果可以通过以下步骤S501以及步骤S502确定,如图5所示,具体的:
在步骤S501中,根据事件信息在所述目标页面中显示所述弹窗。示例性的,事件信息中可以包括一弹窗事件,在该事件发生时会显示该弹窗。通过对目标页面中的用户操作进行检测,可以根据事件信息确定用户操作是否能够满足弹窗对应的的触发条件,如果满足则显示弹窗。例如,事件信息为按钮A被点击时显示弹窗,则在用户点击该按钮A时,该事件信息被触发进而显示该弹窗。
在步骤S502中,响应用户对于弹窗的移动操作,在目标页面中移动弹窗。具体的,目标页面的监听事件可以检测用户的移动操作,例如,检测鼠标坐标的变化、监听触摸点坐标的变化等,然后检测到的坐标发送至弹窗对应的事件中,使得弹窗的位置随着用户的移动而移动。本实施方式中,通过目标页面显示第三方页面中的内容,如果第三方页面中包含弹窗,则该弹窗可以灵活地显示在目标页面中的各个区域,而如果直接将第三方页面嵌入至目标页面中,则弹窗的移动范围只能局限在第三方页面的区域中,而在第三方页面的区域之外还包括目标页面的部分区域,弹窗无法移动至这些区域中会对用户造成较差的体验,因此,通过本实施方式能够避免第三方页面中的元素收到区域限制,具有更好的交互体验。
进一步的,本示例实施方式中,还提供了一种页面交互装置,用于执行本公开上述的页面交互方法。该页面交互装置可以应用于一服务器或终端设备。
参考图6所示,该页面交互装置600可以包括:请求响应模块610、页面确定模块620以及交互模块630,其中:
请求响应模块610,用于响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面;
页面确定模块620,用于通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息;
交互模块630,用于基于所述页面元素信息确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。
在本公开的一种示例性实施例中,页面确定模块620可以包括信息获取单元以及信息转换单元,其中:
信息获取单元,用于通过所述嵌入请求获取所述第三方页面发送的字符串信息。
信息转换单元,用于对所述字符串信息进行格式转换,以获得所述页面元素信息。
在本公开的一种示例性实施例中,信息转换单元可以包括字符串检测单元以及脚本转换单元,其中:
字符串检测单元,用于检测所述字符串信息中包含的目标字符串。
脚本转换单元,用于将所述目标字符串转换成可执行脚本,以获取所述页面元素信息。
在本公开的一种示例性实施例中,页面确定模块620可以包括显示样式确定单元以及页面显示单元,其中:
显示样式确定单元,用于根据所述页面元素信息确定所述第三方页面的显示样式。
页面显示单元,用于将所述显示样式与所述目标页面进行关联,以按照所述显示样式显示所述目标页面。
在本公开的一种示例性实施例中,交互模块630可以包括指令确定单元以及交互控制单元,其中:
指令确定单元,用于基于所述页面元素信息确定用户操作指令。
交互控制单元,用于通过所述第三方页面响应所述用户操作指令,以控制所述目标页面的交互效果。
在本公开的一种示例性实施例中,交互模块630可以包括事件确定单元以及交互效果确定单元,其中:
事件确定单元,用于根据所述页面元素信息确定所述目标页面中的待显示元素,以及事件信息。
交互效果确定单元,用于通过所述待显示元素以及所述事件信息确定所述目标页面的交互效果。
在本公开的一种示例性实施例中,交互模块630可以包括弹窗显示单元以及弹窗控制单元,其中:
弹窗显示单元,用于根据所述事件信息在所述目标页面中显示所述弹窗。
弹窗控制单元,用于响应用户对于所述弹窗的移动操作,在所述目标页面中移动所述弹窗。
由于本公开的示例实施例的页面交互装置的各个功能模块与上述页面交互方法的示例实施例的步骤对应,因此对于本公开装置实施例中未披露的细节,请参照本公开上述的页面交互方法的实施例。
参阅图7,图7示出了可以应用本公开实施例的一种页面交互方法及页面交互装置的示例性应用环境的系统架构的示意图。
如图7所示,系统架构700可以包括终端设备701、702、703中的一个或多个,网络704和服务器705、706。网络704用以在终端设备701、702、703和服务器705、706之间提供通信链路的介质。网络704可以包括各种连接类型,例如有线、无线通信链路或者光纤电缆等等。
终端设备701、702、703可以是具有显示屏的各种电子设备,包括但不限于台式计算机、便携式计算机、智能手机和平板电脑等等。服务器705、706可以是提供各种服务的服务器,例如服务器705可以是对用户利用终端设备701、702、703所浏览的目标页面提供支持的后台管理服务器(仅为示例),服务器706可以是对第三方页面提供支持的后台管理服务器。后台管理服务器可以对接收到的查询请求等数据进行分析等处理,并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。
应该理解,图7中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要,可以具有任意数目的终端设备、网络和服务器。比如服务器705可以是多个服务器组成的服务器集群等。
本公开实施例所提供的页面交互方法一般由服务器705执行,相应地,页面交互装置一般设置于服务器705中。但本领域技术人员容易理解的是,本公开实施例所提供的页面交互方法也可以由终端设备701、702、703执行,相应的,页面交互装置也可以设置于终端设备701、702、703中,本示例性实施例中对此不做特殊限定。
举例而言,在一种示例性实施例中,服务器705可以服务器706发送的第三方页面嵌入请求,从而通过沙箱机制确定对于第三方页面的目标页面,进而,通过服务器706获取第三方页面的页面元素信息,并在目标页面中显示该页面元素信息从而确定目标页面的交互效果,以使第三方页面的交互功能通过目标页面实现,完成第三方页面的嵌入。
图8示出了适于用来实现本公开实施例的电子设备的计算机系统的结构示意图。
需要说明的是,图8示出的电子设备的计算机系统800仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图8所示,计算机系统800包括中央处理单元(CPU)801,其可以根据存储在只读存储器(ROM)802中的程序或者从存储部分808加载到随机访问存储器(RAM)803中的程序而执行各种适当的动作和处理。在RAM 803中,还存储有系统操作所需的各种程序和数据。CPU801、ROM 802以及RAM 803通过总线804彼此相连。输入/输出(I/O)接口805也连接至总线804。
以下部件连接至I/O接口805:包括键盘、鼠标等的输入部分806;包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分807;包括硬盘等的存储部分808;以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分809。通信部分809经由诸如因特网的网络执行通信处理。驱动器810也根据需要连接至I/O接口805。可拆卸介质811,诸如磁盘、光盘、磁光盘、半导体存储器等等,根据需要安装在驱动器810上,以便于从其上读出的计算机程序根据需要被安装入存储部分808。
特别地,根据本公开的实施例,下文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信部分809从网络上被下载和安装,和/或从可拆卸介质811被安装。在该计算机程序被中央处理单元(CPU)801执行时,执行本申请的方法和装置中限定的各种功能。
需要说明的是,本公开所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:无线、电线、光缆、RF等等,或者上述的任意合适的组合。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图或流程图中的每个方框、以及框图或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现,所描述的单元也可以设置在处理器中。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定。
作为另一方面,本申请还提供了一种计算机可读介质,该计算机可读介质可以是上述实施例中描述的电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被一个该电子设备执行时,使得该电子设备实现如下述实施例中所述的方法。例如,所述的电子设备可以实现如图1和图2所示的各个步骤等。
应当注意,尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元,但是这种划分并非强制性的。实际上,根据本公开的实施方式,上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之,上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (10)
1.一种页面交互方法,其特征在于,包括:
响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面;
通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息;
基于所述页面元素信息确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。
2.根据权利要求1所述的方法,其特征在于,所述通过所述嵌入请求获取所述第三方页面的页面元素信息,包括:
通过所述嵌入请求获取所述第三方页面发送的字符串信息;
对所述字符串信息进行格式转换,以获得所述页面元素信息。
3.根据权利要求2所述的方法,其特征在于,所述对所述字符串信息进行格式转换,以获得所述页面元素信息,包括:
检测所述字符串信息中包含的目标字符串;
将所述目标字符串转换成可执行脚本,以获取所述页面元素信息。
4.根据权利要求1所述的方法,其特征在于,所述将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息,包括:
根据所述页面元素信息确定所述第三方页面的显示样式;
将所述显示样式与所述目标页面进行关联,以按照所述显示样式显示所述目标页面。
5.根据权利要求1所述的方法,其特征在于,所述基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,包括:
基于所述页面元素信息确定用户操作指令;
通过所述第三方页面响应所述用户操作指令,以控制所述目标页面的交互效果。
6.根据权利要求1所述的方法,其特征在于,所述基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,包括:
根据所述页面元素信息确定所述目标页面中的待显示元素,以及事件信息;
通过所述待显示元素以及所述事件信息确定所述目标页面的交互效果。
7.根据权利要求6所述的方法,其特征在于,所述待显示元素包括弹窗,所述基于所述目标页面中的所述页面元素信息,确定所述目标页面的交互效果,包括:
根据所述事件信息在所述目标页面中显示所述弹窗;
响应用户对于所述弹窗的移动操作,在所述目标页面中移动所述弹窗。
8.一种页面交互装置,其特征在于,包括:
请求响应模块,用于响应第三方页面的嵌入请求,通过沙箱机制确定对于所述第三方页面的目标页面;
页面确定模块,用于通过所述嵌入请求获取所述第三方页面的页面元素信息,并将所述页面元素信息与所述目标页面进行关联,以在所述目标页面中显示所述页面元素信息;
交互模块,用于基于所述页面元素信息确定所述目标页面的交互效果,以完成所述第三方页面的嵌入。
9.一种计算机可读介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现权利要求1-7任一项所述的方法。
10.一种电子设备,其特征在于,包括:
处理器;以及
存储器,用于存储所述处理器的可执行指令;
其中,所述处理器配置为经由执行所述可执行指令来执行权利要求1-7任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010079852.XA CN111259381A (zh) | 2020-02-04 | 2020-02-04 | 页面交互方法、装置、计算机可读介质及电子设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010079852.XA CN111259381A (zh) | 2020-02-04 | 2020-02-04 | 页面交互方法、装置、计算机可读介质及电子设备 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN111259381A true CN111259381A (zh) | 2020-06-09 |
Family
ID=70951063
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010079852.XA Pending CN111259381A (zh) | 2020-02-04 | 2020-02-04 | 页面交互方法、装置、计算机可读介质及电子设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111259381A (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112162747A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
CN113377375A (zh) * | 2021-06-30 | 2021-09-10 | 杭州群核信息技术有限公司 | 页面处理的方法 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101150559A (zh) * | 2006-09-21 | 2008-03-26 | 阿里巴巴公司 | 一种网站之间数据交换的方法及系统 |
US20120084641A1 (en) * | 2010-09-30 | 2012-04-05 | Microsoft Corporation | Securely rendering online ads in a host page |
CN102662600A (zh) * | 2012-04-28 | 2012-09-12 | 北京亿中邮信息技术有限公司 | 一种不同域名下文件相互拖拽的方法 |
CN103699600A (zh) * | 2013-12-13 | 2014-04-02 | 北京奇虎科技有限公司 | 网页快照的数据处理方法和浏览器 |
CN105955888A (zh) * | 2016-05-04 | 2016-09-21 | 腾讯科技(深圳)有限公司 | 一种页面调试预览方法及系统 |
CN107818171A (zh) * | 2017-11-14 | 2018-03-20 | 北京思特奇信息技术股份有限公司 | 一种基于iframe的页面加载方法及系统 |
CN108228181A (zh) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | 在html页面中嵌入html页面的方法及装置 |
-
2020
- 2020-02-04 CN CN202010079852.XA patent/CN111259381A/zh active Pending
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN101150559A (zh) * | 2006-09-21 | 2008-03-26 | 阿里巴巴公司 | 一种网站之间数据交换的方法及系统 |
US20120084641A1 (en) * | 2010-09-30 | 2012-04-05 | Microsoft Corporation | Securely rendering online ads in a host page |
CN102662600A (zh) * | 2012-04-28 | 2012-09-12 | 北京亿中邮信息技术有限公司 | 一种不同域名下文件相互拖拽的方法 |
CN103699600A (zh) * | 2013-12-13 | 2014-04-02 | 北京奇虎科技有限公司 | 网页快照的数据处理方法和浏览器 |
CN105955888A (zh) * | 2016-05-04 | 2016-09-21 | 腾讯科技(深圳)有限公司 | 一种页面调试预览方法及系统 |
CN107818171A (zh) * | 2017-11-14 | 2018-03-20 | 北京思特奇信息技术股份有限公司 | 一种基于iframe的页面加载方法及系统 |
CN108228181A (zh) * | 2017-12-29 | 2018-06-29 | 北京奇虎科技有限公司 | 在html页面中嵌入html页面的方法及装置 |
Non-Patent Citations (2)
Title |
---|
WOLFSOUL: "广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入", 《博客园》 * |
黑马程序员: "《Android面试宝典》", 31 January 2017, 中国铁道出版社 * |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112162747A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
CN113377375A (zh) * | 2021-06-30 | 2021-09-10 | 杭州群核信息技术有限公司 | 页面处理的方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111274760B (zh) | 富文本数据处理方法、装置、电子设备及计算机存储介质 | |
CN110708346B (zh) | 信息处理系统和方法 | |
KR101580999B1 (ko) | 애플리케이션 간의 콘텐츠를 이동하는 장치 및 방법 | |
CN111045653B (zh) | 系统生成方法、装置、计算机可读介质及电子设备 | |
CN109408754B (zh) | 网页操作数据的处理方法、装置、电子设备及存储介质 | |
US20160359989A1 (en) | Recording And Triggering Web And Native Mobile Application Events With Mapped Data Fields | |
CN111144078B (zh) | Pdf文件中待标注位置确定方法、装置、服务器及存储介质 | |
CN111611513B (zh) | 一种基于用户身份信息的页面展示方法、装置和电子设备 | |
CN110795649A (zh) | 目标页面展示方法、装置、系统及电子设备 | |
CN113159807A (zh) | 落地页处理方法、装置、设备和介质 | |
CN110795181A (zh) | 基于跳转协议的应用程序界面展示方法、装置及电子设备 | |
CN111259381A (zh) | 页面交互方法、装置、计算机可读介质及电子设备 | |
CN113392358A (zh) | 静态资源的预加载方法及装置 | |
CN115470432A (zh) | 一种页面渲染方法、装置、电子设备及计算机可读介质 | |
US20150220941A1 (en) | Visual tagging to record interactions | |
CN110795651A (zh) | 用于保存前端数据的方法、装置及电子设备 | |
CN112395027A (zh) | 微件界面生成方法、装置、存储介质与电子设备 | |
CN110674426B (zh) | 网页行为上报方法和装置 | |
US10452727B2 (en) | Method and system for dynamically providing contextually relevant news based on an article displayed on a web page | |
CN110069186B (zh) | 显示应用的操作界面的方法和设备 | |
CN111680240B (zh) | 一种页面展示的方法、装置和电子设备 | |
CN112052368B (zh) | 自动提取列表数据的方法、系统、存储介质及电子设备 | |
CN111767111B (zh) | 页面数据处理方法及装置、电子设备和存储介质 | |
US20130311359A1 (en) | Triple-click activation of a monetizing action | |
CN111767447A (zh) | 用于确定用户流量路径的方法和装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200609 |
|
RJ01 | Rejection of invention patent application after publication |