带有框架的Html页面，从一个框架链接到另一个框架(带有交互式地图)

Html page with frames with links from one frame to another (with interactive map)

本文关键字：框架 链接 一个 另一个 地图 交互式 页面 Html      更新时间：2023-09-26

我已经下载了下面的交互式地图，我正在尝试将其放入框架集。我已经创建了一个main_page.html，包含:

<html>
<frameset cols="30%,70%" frameborder=no border=no framespacing=no>
<frame src="map.html" name="frame_map">
<frame src="right.htm" name="frame_chart">
</frameset>
</html>

文件map.html(我购买)有css和config.js的地图工作。配置引脚(可用于地图中的城市)的典型代码如下:

{
    'shape':'circle',
    'hover': 'Manchester',
    'pos_X':209,
    'pos_Y':300,
    'diameter':8,
    'outline':'#FFCECE',
    'thickness':1,
    'upColor':'#FF0000',
    'overColor':'#FFEE88',
    'downColor':'#00ffff',
    'url':'http://www.html5interactivemaps.com',
    'target':'same_window',
    'enable':true,
},

然而，映射只允许'same_window'或'new_window'作为链接的目标。我希望将其扩展到我的帧集上的右帧(即在main_page.html中定义的frame_chart)。我认为应该在以下代码中添加…但是 ?

function addEvent(id,relationId){
    var _obj = $('#'+id);
    var _Textobj = $('#'+id+','+'#'+map_config[id]['namesId']);
    _obj.attr({'fill':map_config[id]['upColor'],'stroke':map_config['default']['borderColor']});
    _Textobj.attr({'cursor':'default'});
    if(map_config[id]['enable'] == true){
        if (isTouchEnabled()) {
            //clicking effect
            _Textobj.on('touchstart', function(e){
                var touch = e.originalEvent.touches[0];
                var x=touch.pageX+10, y=touch.pageY+15;
                var tipw=$('#map-tip').outerWidth(), tiph=$('#map-tip').outerHeight(), 
                x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(20*2) : x
                y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
                $('#'+id).css({'fill':map_config[id]['downColor']});
                $('#map-tip').show().html(map_config[id]['hover']);
                $('#map-tip').css({left:x, top:y})
            })
            _Textobj.on('touchend', function(){
                $('#'+id).css({'fill':map_config[id]['upColor']});
                if(map_config[id]['target'] == 'new_window'){
                    window.open(map_config[id]['url']); 
                }else if(map_config[id]['target'] == 'same_window'){
                    window.parent.location.href=map_config[id]['url'];
                }
            })
        }
        _Textobj.attr({'cursor':'pointer'});
        _Textobj.hover(function(){
            //moving in/out effect
            $('#map-tip').show().html(map_config[id]['hover']);
            _obj.css({'fill':map_config[id]['overColor']})
        },function(){
            $('#map-tip').hide();
            $('#'+id).css({'fill':map_config[id]['upColor']});
        })
        //clicking effect
        _Textobj.mousedown(function(){
            $('#'+id).css({'fill':map_config[id]['downColor']});
        })
        _Textobj.mouseup(function(){
            $('#'+id).css({'fill':map_config[id]['overColor']});
            if(map_config[id]['target'] == 'new_window'){
                window.open(map_config[id]['url']); 
            }else if(map_config[id]['target'] == 'same_window'){
                window.parent.location.href=map_config[id]['url'];
            }
        })
        _Textobj.mousemove(function(e){
            var x=e.pageX+10, y=e.pageY+15;
            var tipw=$('#map-tip').outerWidth(), tiph=$('#map-tip').outerHeight(), 
            x=(x+tipw>$(document).scrollLeft()+$(window).width())? x-tipw-(20*2) : x
            y=(y+tiph>$(document).scrollTop()+$(window).height())? $(document).scrollTop()+$(window).height()-tiph-10 : y
            $('#map-tip').css({left:x, top:y})
        })
    }   
}

提前感谢!

试试这个

_Textobj.mouseup(function(){
        $('#'+id).css({'fill':map_config[id]['overColor']});
        if(map_config[id]['target'] == 'new_window'){
            window.open(map_config[id]['url']); 
        }else if(map_config[id]['target'] == 'same_window'){
            window.parent.location.href=map_config[id]['url'];
        }
        // Add to map to your frame with id frame_chart
        else if(map_config[id]['target'] == 'frame')
        {
            document.getElementById('frame_chart').src = map_config[id]['url'];
        }
    });

然后在config

中添加'target':'frame'

我希望这对你有帮助

相关文章：