简体   繁体   English

如何从外部HTML执行Javascript

[英]How to execute Javascript from external HTML

If I have a button that executes the code 如果我有一个执行代码的按钮

$('#main').load('welcome.html');

and in welcome.html I have a button that executes the code welcome.html我有一个执行代码的按钮

$('#main').load('otherpage.html');

the Javascript isn't executed, regardless of whether that function is on the parent file's HTML code or the child's. 无论该函数是在父文件的HTML代码上还是在子文件的HTML代码上,都不会执行Javascript。

How can I get a Javascript function to work from externally loaded HTML files? 我如何才能从外部加载的HTML文件中使用Javascript函数?

EDIT Here's a bit more of a sample... 编辑这是更多示例...

Homepage: 主页:

<body>
    <div id="main"></div>
</body>

<script>
    document.onLoad(){
        $('#main').load('welcome.html');
    }

    function show(file){
        $('#main').load(file+'.html');
    }
</script>

welcome.html page: welcome.html页面:

<a href="javascript:show(test)">Test</a>

...however when the Test button is clicked, test.html is not loaded into the Main div. ...但是,当单击“测试”按钮时, test.html不会加载到Main div中。

EDIT 2 编辑2

Here is what the current state is and what the issue is - exactly. 这就是当前的状态,问题所在-确切地说。

I've uploaded the bones of the code to PasteBin . 我已将代码的骨骼上传到PasteBin

When the 'grid' button is clicked, the content changes and the footer changes. 单击“网格”按钮时,内容会更改,页脚也会更改。

However, the footer, which has URLs based on Javascript, comes up with the error: 但是,具有基于Javascript的URL的页脚会出现以下错误:

Uncaught SyntaxError: Unexpected token ILLEGAL

...when trying to access the 1i.html page. ...在尝试访问1i.html页面时。

There's a difference between test the variable and 'test' the string: test变量和'test'字符串之间是有区别的:

<a href="javascript:show(test)">Test</a>

Probably should be: 可能应该是:

<a href="javascript:void show('test')">Test</a>

It is important to understand that when loading script into page via AJAX that the main page has already gone through document.ready . 重要的是要理解,当通过AJAX将脚本加载到页面中时,主页已经通过document.ready Thus, any code you load will fire immediately. 因此,您加载的任何代码都会立即触发。

If the code you load precedes the html it references, it will not find that html when it fires. 如果您加载的代码在它引用的html之前,则在触发时将找不到该html。

Placing the code after the html in remote page will resolve this issue 将代码放在远程页面中的html之后将解决此问题

Check jQuery.live() and jQuery.on() . 检查jQuery.live()jQuery.on()

Maybe your eventhandler is wrong. 也许您的事件处理程序是错误的。 When you import new markup via load() or ajax(), you have to initialize the handlers from new document. 通过load()或ajax()导入新标记时,必须从新文档中初始化处理程序。 The easiest way is using jQuery.on or jQuery.live() instead of jQuery.click(). 最简单的方法是使用jQuery.on或jQuery.live()而不是jQuery.click()。

$('MYBUTTON').live('click', function(){
    $('#main').load('your_url.html')
})

or use the callbackfunction to (re-)initialize the buttons event. 或使用回调函数来(重新)初始化按钮事件。

A better solution is this: Just add the target_url to buttons rel attribute... 更好的解决方案是:只需将target_url添加到按钮的rel属性...

<button rel="YOUR_URL.html">Open Page</button>

$('button[rel]').live('click', function(){
    $('#main').load($(this).attr('rel'));
})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM