0

I'm writing a tool for finding css selectors on outer web page. It's plain html page that contains iframe with target site and few control elements. All logic is also in javascript using jquery, so no server-side for now.

The problem I faced is that a can't add handlers/classes to iframe document elements using Firefox 26.0 . Sample code:

 iframe.contents().find("*").hover(function() {
     console.log("This is " + $(this).get(0).tagName + "element");
 }

I get next error message in console: Error: Permission denied to access property 'document'. I understand that it's a security feature indeed, but I just need to workaround it somehow.

What I've tried:

  • Using Google Chrome - it allows to run browser with special flag (--disable-web-security) that turns off such security features. It helped and my tool is working just as I expected, but I need to use exactly Firefox.
  • Using addon https://addons.mozilla.org/en-US/firefox/addon/forcecors/ . It didn't helped at all. I also tried to add x-frames-origin header by that tool, but no result.
  • Turning off security.fileuri.strict_origin_policy flag in firefox configuration. Also didn't help.

Maybe I missed something and there is some other workaround/better solution? I'll appreciate any help.

Update: page and iframe are NOT on the same site. My tool is just local .html file, iframe source - any site(wikipedia, yahoo etc.)

4

1 回答 1

0

最后我找到了解决方案。我使用了一个插件GreaseMonkey。它允许我将我的 js 代码插入 iframe，因此我可以使用消息 API 与我的页面中的代码进行交互。例子：

  • 防止在父窗口中运行代码：if (window.top == window.self) return;
  • 从主窗口接收一些东西：window.addEventListener('message', yourHandlerHere, false);
  • 在主窗口发布一些东西：window.parent.postMessage(yourDataHere);
于 2014-03-11T13:47:03.213 回答